M

MLOG

Polski

Zapewnij inkluzywne doświadczenia internetowe użytkownikom na całym świecie, implementując dostępne etykiety formularzy. Poznaj najlepsze praktyki zgodności z WCAG i poprawy użyteczności.

Etykiety formularzy: Kluczowe wymagania dotyczące dostępności pól wejściowych

Formularze są fundamentalną częścią internetu. Od prostych formularzy kontaktowych po złożone procesy zakupowe w e-commerce, umożliwiają one użytkownikom interakcję ze stronami internetowymi i aplikacjami. Jednak źle zaprojektowane formularze mogą stanowić poważne bariery dla użytkowników z niepełnosprawnościami. Kluczowym elementem tworzenia dostępnych formularzy jest prawidłowe użycie etykiet. Ten przewodnik przedstawia kompleksowy przegląd wymagań dotyczących dostępności etykiet formularzy, zapewniając, że Twoje formularze będą użyteczne dla każdego, niezależnie od jego możliwości.

Dlaczego dostępne etykiety formularzy są ważne?

Dostępne etykiety formularzy są kluczowe z kilku powodów:

Zrozumienie wymagań WCAG dla etykiet formularzy

WCAG dostarcza konkretnych wytycznych zapewniających dostępność formularzy. Oto kluczowe wymagania dotyczące etykiet formularzy:

Kryterium sukcesu WCAG 2.1 1.1.1 Treść nietekstowa (Poziom A)

Chociaż nie dotyczy to bezpośrednio etykiet, to kryterium podkreśla znaczenie dostarczania alternatyw tekstowych dla całej treści nietekstowej, w tym CAPTCHA i obrazów używanych w formularzach. Prawidłowo oznaczony formularz jest kluczowy dla zapewnienia kontekstu dla tych alternatyw.

Kryterium sukcesu WCAG 2.1 1.3.1 Informacje i relacje (Poziom A)

Informacje, struktura i relacje przekazywane poprzez prezentację powinny być możliwe do odczytania maszynowo lub dostępne w formie tekstowej. Oznacza to, że relacja między etykietą a odpowiadającym jej polem wejściowym musi być jawnie zdefiniowana w kodzie HTML.

Kryterium sukcesu WCAG 2.1 2.4.6 Nagłówki i etykiety (Poziom AA)

Nagłówki i etykiety opisują temat lub cel. Etykiety formularzy dostarczają opisowego kontekstu dla pól wejściowych, ułatwiając użytkownikom zrozumienie struktury formularza i jego poprawne wypełnienie.

Kryterium sukcesu WCAG 2.1 3.3.2 Etykiety lub instrukcje (Poziom A)

Etykiety lub instrukcje są dostarczane, gdy treść wymaga wprowadzenia danych przez użytkownika.

Kryterium sukcesu WCAG 2.1 4.1.2 Nazwa, rola, wartość (Poziom A)

Dla wszystkich komponentów interfejsu użytkownika (w tym między innymi elementów formularzy, linków i komponentów generowanych przez skrypty), nazwa i rola muszą być możliwe do odczytania maszynowo; stany, właściwości i wartości, które mogą być ustawione przez użytkownika, muszą być możliwe do ustawienia programowo; a powiadomienia o zmianach tych elementów są dostępne dla agentów użytkownika, w tym technologii asystujących.

Najlepsze praktyki implementacji dostępnych etykiet formularzy

Oto kilka najlepszych praktyk tworzenia dostępnych etykiet formularzy:

1. Używaj elementu <label>

Element <label> jest podstawowym sposobem powiązania etykiety tekstowej z polem wejściowym. Zapewnia on semantyczne i strukturalne połączenie między etykietą a kontrolką. Atrybut for elementu <label> powinien odpowiadać atrybutowi id odpowiedniego pola wejściowego.

Przykład:


<label for="name">Imię:</label>
<input type="text" id="name" name="name">

Nieprawidłowy przykład (unikaj):


<span>Imię:</span>
<input type="text" id="name" name="name">

Użycie elementu span zamiast label nie tworzy niezbędnego programistycznego powiązania, co czyni go niedostępnym dla czytników ekranu.

2. Jawnie powiąż etykiety z polami wejściowymi

Zapewnij jasne i jawne powiązanie między etykietą a polem wejściowym za pomocą atrybutów for oraz id, jak pokazano w powyższym przykładzie.

3. Pozycjonuj etykiety prawidłowo

Umiejscowienie etykiet może wpływać na użyteczność. Generalnie, etykiety powinny być umieszczone:

Rozważ normy kulturowe podczas pozycjonowania etykiet. W niektórych językach etykiety są tradycyjnie umieszczane za polem wejściowym. Dostosuj swój projekt, aby uwzględnić te preferencje.

4. Zapewnij jasne i zwięzłe etykiety

Etykiety powinny być krótkie, opisowe i łatwe do zrozumienia. Unikaj żargonu lub terminów technicznych, które mogą mylić użytkowników. Na przykład, zamiast „IDUżytkownika”, użyj „Nazwa użytkownika” lub „Adres e-mail”. Rozważ lokalizację. Upewnij się, że Twoje etykiety można łatwo przetłumaczyć na różne języki, zachowując ich znaczenie.

5. Używaj atrybutów ARIA, gdy jest to konieczne

Atrybuty ARIA (Accessible Rich Internet Applications) mogą zwiększyć dostępność elementów formularza, zwłaszcza w złożonych scenariuszach. Używaj jednak ARIA z rozwagą i tylko wtedy, gdy natywne elementy i atrybuty HTML są niewystarczające.

Przykład użycia aria-label:


<input type="search" aria-label="Przeszukaj stronę internetową">

Przykład użycia aria-labelledby:


<h2 id="newsletter-title">Subskrypcja newslettera</h2>
<input type="email" aria-labelledby="newsletter-title" placeholder="Wpisz swój adres e-mail">

6. Grupuj powiązane elementy formularza za pomocą <fieldset> i <legend>

Element <fieldset> grupuje powiązane kontrolki formularza, a element <legend> dostarcza podpis dla tego zestawu. Poprawia to strukturę formularza i ułatwia użytkownikom zrozumienie relacji między różnymi polami wejściowymi.

Przykład:


<fieldset>
  <legend>Informacje kontaktowe</legend>
  <label for="name">Imię:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email">
</fieldset>

7. Zapewnij czytelne komunikaty o błędach

Gdy użytkownicy popełnią błędy podczas wypełniania formularza, dostarczaj jasne i informacyjne komunikaty o błędach, które wyjaśniają, co poszło nie tak i jak poprawić błąd. Powiąż te komunikaty o błędach z odpowiednimi polami wejściowymi za pomocą atrybutów ARIA, takich jak aria-describedby.

Przykład:


<label for="email">E-mail:</label>
<input type="email" id="email" name="email" aria-describedby="email-error">
<span id="email-error" class="error-message">Proszę podać prawidłowy adres e-mail.</span>

Upewnij się, że komunikat o błędzie jest wizualnie odróżniony (np. za pomocą koloru lub ikon) i programistycznie dostępny dla technologii asystujących.

8. Używaj wystarczającego kontrastu kolorów

Zapewnij wystarczający kontrast kolorów między tekstem etykiety a kolorem tła, aby spełnić wymagania WCAG. Użyj narzędzia do analizy kontrastu kolorów, aby sprawdzić, czy współczynnik kontrastu spełnia minimalne wymagania (4.5:1 dla normalnego tekstu i 3:1 dla dużego tekstu). Pomaga to użytkownikom o słabym wzroku łatwiej czytać etykiety.

9. Zapewnij dostępność z klawiatury

Wszystkie elementy formularza powinny być dostępne za pomocą samej klawiatury. Użytkownicy powinni móc nawigować po formularzu za pomocą klawisza Tab i wchodzić w interakcję z kontrolkami formularza za pomocą spacji lub klawisza Enter. Dokładnie przetestuj swoje formularze za pomocą klawiatury, aby zapewnić prawidłową dostępność z klawiatury.

10. Testuj za pomocą technologii asystujących

Najlepszym sposobem na upewnienie się, że formularze są dostępne, jest przetestowanie ich za pomocą technologii asystujących, takich jak czytniki ekranu (np. NVDA, JAWS, VoiceOver). Pomoże to zidentyfikować wszelkie problemy z dostępnością, które mogą nie być widoczne podczas inspekcji wizualnej. Zaangażuj użytkowników z niepełnosprawnościami w proces testowania, aby uzyskać cenne opinie.

Przykłady implementacji dostępnych etykiet formularzy

Przykład 1: Prosty formularz kontaktowy (perspektywa międzynarodowa)

Rozważmy formularz kontaktowy dla globalnej publiczności. Etykiety powinny być jasne, zwięzłe i łatwe do przetłumaczenia.


<form>
  <label for="name">Imię i nazwisko:</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">Adres e-mail:</label>
  <input type="email" id="email" name="email"><br><br>

  <label for="country">Kraj:</label>
  <select id="country" name="country">
    <option value="">Wybierz kraj</option>
    <option value="us">Stany Zjednoczone</option>
    <option value="ca">Kanada</option>
    <option value="uk">Wielka Brytania</option>
    <option value="de">Niemcy</option>
    <option value="fr">Francja</option>
    <option value="jp">Japonia</option>
    <option value="au">Australia</option>
    <!-- Dodaj więcej krajów -->
  </select><br><br>

  <label for="message">Wiadomość:</label>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

  <input type="submit" value="Wyślij">
</form>

Zwróć uwagę na użycie „Imię i nazwisko” zamiast samego „Imię” dla jasności, zwłaszcza w kulturach, gdzie nazwisko poprzedza imię.

Przykład 2: Formularz zamówienia w e-commerce

Formularze zamówień w e-commerce często wymagają podania wrażliwych informacji. Jasne etykiety i instrukcje są kluczowe dla budowania zaufania i zapewnienia dostępności.


<form>
  <fieldset>
    <legend>Adres dostawy</legend>
    <label for="shipping_name">Imię i nazwisko:</label>
    <input type="text" id="shipping_name" name="shipping_name"><br><br>

    <label for="shipping_address">Adres:</label>
    <input type="text" id="shipping_address" name="shipping_address"><br><br>

    <label for="shipping_city">Miasto:</label>
    <input type="text" id="shipping_city" name="shipping_city"><br><br>

    <label for="shipping_zip">Kod pocztowy:</label>
    <input type="text" id="shipping_zip" name="shipping_zip"><br><br>

    <label for="shipping_country">Kraj:</label>
    <select id="shipping_country" name="shipping_country">
      <option value="">Wybierz kraj</option>
      <option value="us">Stany Zjednoczone</option>
      <option value="ca">Kanada</option>
      <!-- Dodaj więcej krajów -->
    </select>
  </fieldset>

  <fieldset>
    <legend>Informacje o płatności</legend>
    <label for="card_number">Numer karty kredytowej:</label>
    <input type="text" id="card_number" name="card_number"><br><br>

    <label for="expiry_date">Data ważności (MM/RR):</label>
    <input type="text" id="expiry_date" name="expiry_date" placeholder="MM/RR"><br><br>

    <label for="cvv">CVV:</label>
    <input type="text" id="cvv" name="cvv"><br><br>
  </fieldset>

  <input type="submit" value="Złóż zamówienie">
</form>

Użycie elementów fieldset i legend wyraźnie organizuje formularz w logiczne sekcje. Tekst zastępczy (placeholder) dostarcza dodatkowych wskazówek, ale pamiętaj, że nie powinien on zastępować etykiet.

Przykład 3: Formularz rejestracyjny z atrybutami ARIA

Rozważmy formularz rejestracyjny, w którym pseudonim jest opcjonalny. Używając atrybutów ARIA, możemy dostarczyć dodatkowy kontekst.


<form>
  <label for="username">Nazwa użytkownika:</label>
  <input type="text" id="username" name="username" required><br><br>

  <label for="password">Hasło:</label>
  <input type="password" id="password" name="password" required><br><br>

  <label for="nickname">Pseudonim (opcjonalnie):</label>
  <input type="text" id="nickname" name="nickname" aria-describedby="nickname-info">
  <span id="nickname-info">Ten pseudonim będzie wyświetlany publicznie.</span><br><br>

  <input type="submit" value="Zarejestruj się">
</form>

Atrybut aria-describedby łączy pole wejściowe pseudonimu z elementem span, który dostarcza dodatkowych informacji o tym, jak pseudonim będzie używany.

Narzędzia do testowania dostępności formularzy

Kilka narzędzi może pomóc w ocenie dostępności Twoich formularzy:

Podsumowanie

Dostępne etykiety formularzy są niezbędne do tworzenia inkluzywnych doświadczeń internetowych. Postępując zgodnie z najlepszymi praktykami opisanymi w tym przewodniku, możesz zapewnić, że Twoje formularze będą użyteczne dla każdego, niezależnie od jego możliwości. Priorytetowe traktowanie dostępności nie tylko przynosi korzyści użytkownikom z niepełnosprawnościami, ale także poprawia ogólną użyteczność Twojej strony dla wszystkich użytkowników. Pamiętaj o regularnym testowaniu formularzy za pomocą technologii asystujących i angażowaniu użytkowników z niepełnosprawnościami w proces testowania, aby uzyskać cenne opinie i stale poprawiać dostępność swojej witryny.

Przyjęcie zasad dostępności to nie tylko kwestia zgodności z przepisami; to tworzenie bardziej inkluzywnego i sprawiedliwego internetu dla wszystkich. Inwestując w projektowanie dostępnych formularzy, demonstrujesz zaangażowanie w inkluzywność i tworzysz lepsze doświadczenie dla wszystkich użytkowników.