WCAG 3.3.2: Etykiety lub instrukcje

Wprowadzenie do WCAG 3.3.2: Etykiety lub instrukcje

Kryterium sukcesu WCAG 3.3.2, zatytułowane „Etykiety lub instrukcje”, jest fundamentalnym elementem zapewniającym dostępność interaktywnych treści internetowych, zwłaszcza formularzy. Jego głównym celem jest gwarancja, że każdy użytkownik, niezależnie od swoich zdolności, będzie w stanie zrozumieć, jakie dane powinien wprowadzić w pola formularza.

Zgodnie z WCAG 2.0 i 2.1 na poziomie dostępności A, kryterium to stanowi, że „Gdy wymagane jest wprowadzenie danych, należy podać etykiety lub instrukcje”. Oznacza to, że każde pole, w którym użytkownik ma wprowadzić informacje (tekst, wybrać opcję itp.), musi być jasno opisane lub opatrzone instrukcją, która precyzyjnie informuje o jego przeznaczeniu.

Spełnienie tego kryterium jest kluczowe dla użyteczności i dostępności, ponieważ pozwala użytkownikom efektywnie wchodzić w interakcje z witryną, minimalizując błędy i frustrację.

Dlaczego WCAG 3.3.2 jest ważne? (Wpływ na dostępność)

Zapewnienie odpowiednich etykiet i instrukcji w formularzach ma ogromny wpływ na dostępność i użyteczność witryn internetowych dla szerokiego grona użytkowników:

• Użytkownicy czytników ekranu

  Czytniki ekranu odczytują etykiety programistyczne pól formularzy. Bez właściwych etykiet użytkownik nie wie, do czego służy dane pole, co uniemożliwia wypełnienie formularza. Na przykład, pola tekstowe bez powiązanych etykiet zostaną odczytane jako „edycja” lub „pole tekstowe”, bez kontekstu.

• Osoby z niepełnosprawnościami poznawczymi

  Jasne, zwięzłe etykiety i instrukcje pomagają osobom z dysleksją, ADD/ADHD lub innymi trudnościami poznawczymi zrozumieć wymagane informacje i sposób ich wprowadzenia, redukując obciążenie poznawcze i ryzyko błędów.

• Osoby niedowidzące

  Oprócz użytkowników czytników ekranu, osoby niedowidzące korzystające z powiększenia ekranu mogą widzieć tylko fragment interfejsu. Wyraźne i dobrze umieszczone etykiety pomagają im szybko zidentyfikować cel każdego pola, nawet gdy widzą tylko jego fragment.

• Użytkownicy urządzeń mobilnych

  Na mniejszych ekranach kontekst wizualny może być ograniczony. Jasne etykiety są niezbędne do szybkiego zrozumienia celu pola bez konieczności przewijania lub odgadywania.

• Użytkownicy poleceń głosowych

  Osoby korzystające z oprogramowania do rozpoznawania mowy mogą aktywować pola formularza za pomocą nazw etykiet. Jeśli etykieta jest niewidoczna lub nieprawidłowo powiązana, nawigacja staje się niemożliwa.

• Wszyscy użytkownicy

  Nawet osoby bez niepełnosprawności czerpią korzyści z dobrze opisanych pól formularzy. Zmniejsza to liczbę błędów, przyspiesza wypełnianie formularzy i poprawia ogólne doświadczenie użytkownika.

Wymagania kryterium sukcesu WCAG 3.3.2

Kryterium sukcesu 3.3.2, „Etykiety lub instrukcje”, jest na poziomie A, co oznacza, że jest to podstawowy wymóg dostępności. Jego pełne brzmienie to: „Gdy wymagane jest wprowadzenie danych, należy podać etykiety lub instrukcje.”

Co to oznacza w praktyce?

• Etykiety (Labels): Etykieta to krótki, konkretny opis przeznaczenia pojedynczego pola formularza. Powinna być powiązana programowo z polem, do którego się odnosi. Najczęściej realizuje się to za pomocą elementu <label> w HTML, z atrybutem for wskazującym na id pola formularza.
• Instrukcje (Instructions): Instrukcje są bardziej rozbudowane i służą do wyjaśnienia zasad wypełniania złożonych pól lub grup pól. Mogą dotyczyć formatu danych (np. „RRRR-MM-DD” dla daty), wymagań dotyczących haseł (np. „Minimum 8 znaków, w tym cyfra i duża litera”) lub specyficznych reguł biznesowych. Instrukcje powinny być umieszczone w sposób logiczny, blisko pola lub grupy pól, których dotyczą.
• Wymagane wprowadzenie danych: Kryterium dotyczy każdego elementu interfejsu, który wymaga od użytkownika wprowadzenia informacji. Obejmuje to pola tekstowe (<input type="text">), pola haseł (<input type="password">), pola wyboru (<input type="checkbox">, <input type="radio">), pola wyboru plików (<input type="file">), listy rozwijane (<select>) oraz obszary tekstowe (<textarea>).

Kluczowe jest, by relacja między etykietą/instrukcją a kontrolką formularza była opisana w kodzie w sposób czytelny dla technologii wspomagających.

Jak spełnić kryterium WCAG 3.3.2? (Praktyczne wskazówki)

Aby spełnić kryterium 3.3.2, należy zastosować następujące praktyki:

1. Używaj elementu <label> z atrybutem for

To podstawowy i najbardziej efektywny sposób programowego powiązania etykiety z polem formularza. Atrybut for w <label> musi odpowiadać atrybutowi id pola wejściowego.

2. Grupuj powiązane kontrolki za pomocą <fieldset> i <legend>

Dla grup pól wyboru (np. radio buttonów, checkboxów), element <fieldset> z <legend> zapewnia ogólną etykietę dla całej grupy, co jest kluczowe dla zrozumienia kontekstu przez użytkowników czytników ekranu.

3. Zapewnij instrukcje dla złożonych lub nietypowych pól

Jeśli format danych jest specyficzny lub pole wymaga określonego typu danych, dostarcz dodatkowe instrukcje. Mogą to być wskazówki dotyczące formatu daty, wymagań dotyczących hasła, limitu znaków itp. Te instrukcje powinny być umieszczone w widocznym miejscu, najlepiej tuż przed lub za polem.

4. Nie polegaj wyłącznie na tekście zastępczym (placeholder)

Tekst zastępczy (atrybut placeholder) znika po rozpoczęciu wpisywania danych i nie jest programowo dostępny dla wszystkich technologii wspomagających jako etykieta. Może służyć jako dodatkowa wskazówka lub przykład, ale nigdy nie zastępuje właściwej etykiety.

5. Używaj atrybutów WAI-ARIA (w razie potrzeby)

W przypadku niestandardowych kontrolek formularza lub scenariuszy, gdzie natywne elementy HTML nie są wystarczające, użyj atrybutów WAI-ARIA, takich jak aria-label lub aria-labelledby, aby dostarczyć programową etykietę.

• aria-label: Gdy etykieta tekstowa jest niewidoczna, ale potrzebne jest opisanie kontrolki.
• aria-labelledby: Gdy etykieta składa się z wielu elementów tekstowych lub jest zlokalizowana w innym miejscu niż bezpośrednio obok pola.

6. Zapewnij, że etykiety są zawsze widoczne

Etykiety nie powinny być ukrywane wizualnie za pomocą CSS (np. display: none;, visibility: hidden;), chyba że są dostarczane alternatywnymi metodami (np. aria-label), które zapewniają ich dostępność programową. Jeśli etykieta jest wizualnie ukryta, ale ma być dostępna dla czytników ekranu, należy użyć klasy CSS, która wizualnie ją ukrywa, ale pozostawia dostępną dla technologii wspomagających (np. .visually-hidden).

Przykłady implementacji

Poprawna implementacja

<label for="imie">Twoje imię:</label>
<input type="text" id="imie" name="imie" autocomplete="name">
Skopiuj tekst

<fieldset>
  <legend>Preferowany sposób kontaktu:</legend>
  <input type="radio" id="email" name="kontakt" value="email">
  <label for="email">E-mail</label><br>
  <input type="radio" id="telefon" name="kontakt" value="telefon">
  <label for="telefon">Telefon</label>
</fieldset>
Skopiuj tekst

<label for="data">Data urodzenia:</label>
<input type="text" id="data" name="data-urodzenia" aria-describedby="data-instrukcja">
<span id="data-instrukcja">Wprowadź w formacie RRRR-MM-DD.</span>
Skopiuj tekst

<button type="submit" aria-label="Szukaj">
  <img src="search-icon.svg" alt="Ikona lupy">
</button>
Skopiuj tekst

Niepoprawna implementacja

<input type="text" placeholder="Wprowadź swoje imię">
Skopiuj tekst

<span>Nazwisko:</span>
<input type="text" id="nazwisko" name="nazwisko">
Skopiuj tekst

<label for="email" style="display: none;">E-mail:</label>
<input type="email" id="email" name="email">
Skopiuj tekst

Najlepsze praktyki i typowe błędy

Najlepsze praktyki:

1. Zawsze używaj <label>: To najbardziej solidny i szeroko wspierany sposób na powiązanie etykiet z kontrolkami formularzy.
2. Opisowe i zwięzłe etykiety: Etykiety powinny być jasne i jednoznacznie określać cel pola. Unikaj żargonu.
3. Ustawienie etykiety: Dla pól tekstowych i obszarów tekstowych umieść etykietę nad lub przed polem. Dla checkboxów i radio buttonów umieść etykietę po kontrolce.
4. Wskazówki dla wymaganych pól: Jeśli pole jest wymagane, włącz tę informację w etykietę (np. „Imię (wymagane)” lub użyj atrybutu required, który może być odczytany przez czytniki ekranu).
5. Zapewnij wizualny kontekst: Oprócz programowego powiązania, upewnij się, że etykiety są wizualnie blisko swoich pól i są czytelne (odpowiedni rozmiar fontu, kontrast).
6. Użyj aria-describedby dla dodatkowych instrukcji: Jeśli instrukcja jest dłuższa niż krótka etykieta, powiąż ją programowo za pomocą aria-describedby, wskazując na element zawierający instrukcję.

Typowe błędy:

1. Poleganie wyłącznie na placeholder: Jak wspomniano, tekst zastępczy nie jest zamiennikiem dla pełnoprawnej etykiety.
2. Brak programowego powiązania: Używanie tylko wizualnego tekstu obok pola bez elementu <label> lub atrybutów ARIA.
3. Nieprecyzyjne lub ogólnikowe etykiety: Etykiety takie jak „Wprowadź dane” są bezużyteczne.
4. Ukrywanie etykiet CSS bez alternatywy: Ukrycie etykiety za pomocą display: none; lub visibility: hidden; sprawia, że jest ona niedostępna dla wszystkich. Jeśli etykieta ma być wizualnie ukryta, ale dostępna dla czytników ekranu, użyj specjalnych klas, które ją ukrywają, ale pozostawiają w drzewie dostępności (np. .sr-only).
5. Oddzielenie etykiet od pól: Jeśli etykieta jest zbyt daleko od swojego pola, użytkownik może mieć trudności z wizualnym powiązaniem ich ze sobą.

Podsumowanie

Kryterium WCAG 3.3.2 „Etykiety lub instrukcje” jest kluczowe dla stworzenia inkluzywnych i użytecznych formularzy internetowych. Poprawne stosowanie etykiet i instrukcji nie tylko spełnia wymagania dostępności, ale także poprawia doświadczenie użytkownika dla każdego. Pamiętając o programowym powiązaniu etykiet z polami, zapewnieniu jasnych instrukcji oraz unikaniu powszechnych błędów, możemy tworzyć interaktywne treści dostępne dla wszystkich.