- Poziom
- A
- Od wersji
- WCAG 2.0
- Pozycje
- 3 / 193
3.3.2 Etykiety lub instrukcje
Każde miejsce, w którym trzeba coś wpisać, potrzebuje widocznej etykiety albo instrukcji mówiącej, czego się tam oczekuje.
/ Czego wymaga
Wszędzie tam, gdzie treść wymaga wprowadzenia danych, ludzie muszą wiedzieć, co wpisać, zanim zaczną. Oznacza to widoczną etykietę dla każdego pola, pytanie dla każdej grupy pól wyboru lub przycisków opcji oraz instrukcję tam, gdzie dane muszą mieć określoną postać, jak format daty albo pole obowiązkowe. Pomaga to wszystkim, a rozstrzygające jest dla osób z niepełnosprawnością poznawczą lub trudnościami w uczeniu się, dla osób, które powiększają ekran i widzą jedno pole naraz, oraz dla każdego, kto korzysta z czytnika ekranu.
Kryterium wymaga, żeby etykiety lub instrukcje były obecne. Nie mówi, że muszą być powiązane z polem w kodzie, bo to zakres kryteriów 1.3.1 i 4.1.2, ani że muszą być dobrze sformułowane, bo to 2.4.6. Nie wymienia żadnych wyjątków. Placeholder, który znika przy pierwszym naciśnięciu klawisza, zostawia pole bez etykiety akurat wtedy, gdy człowiek sprawdza, co wpisał, i dlatego audytorzy nie uznają go za jedyną etykietę.
/ Jak strony go nie spełniają
- Pole ma tylko placeholder, na przykład „E-mail”, który znika, gdy tylko zacznie się pisać.
- Pola obowiązkowe są oznaczone gwiazdką, a nic na stronie nie wyjaśnia, co ta gwiazdka znaczy.
- Pole daty lub telefonu oczekuje określonego formatu i go nie pokazuje.
- Grupa przycisków opcji proponuje „Tak” i „Nie”, a nad nimi nie ma widocznego pytania.
- Instrukcja do pola jest wydrukowana pod przyciskiem wysyłania, czyli za miejscem, w którym była potrzebna.
/ Jak sprawdzić samodzielnie
- Obejrzyj każde pole przy pustym formularzu. Widoczny tekst powinien mówić, co należy w nie wpisać.
- Wpisz coś w każde pole i sprawdź, czy jego etykieta nadal jest na ekranie.
- Znajdź pola obowiązkowe i sprawdź, czy oznaczenie jest wyjaśnione przed pierwszym polem albo zapisane słowem w każdej etykiecie.
- W polach o ustalonym formacie, takich jak daty, numery telefonów i hasła, poszukaj widocznej wskazówki, co jest przyjmowane.
- Przy każdej grupie pól wyboru i przycisków opcji poszukaj pytania albo nagłówka, do którego należą opcje.
/ Jak to naprawić
- Daj każdemu polu widoczny element label i połącz go atrybutem for z id elementu input.
- Obejmij powiązane pola wyboru lub przyciski opcji elementem fieldset, a pytanie wpisz w jego elemencie legend.
- Podaj oczekiwany format w etykiecie albo we wskazówce pod polem i powiąż tę wskazówkę z elementem input atrybutem aria-describedby.
- Oznacz pola obowiązkowe słowem „wymagane” w etykiecie albo wyjaśnij gwiazdkę nad formularzem. Dodaj też do elementu input atrybut required lub aria-required="true".
- Atrybutu placeholder używaj tylko do pokazania przykładowej wartości, nigdy jako jedynej nazwy pola.
/ Co sprawdza nasz skaner
Do tego kryterium przypisany jest jeden test, required-not-announced. Gdy nazwa dostępna widocznego pola zawiera gwiazdkę albo słowa „(required)” lub „(wymagane)”, a pole nie ma ani atrybutu required, ani aria-required="true", test zgłasza to pole. Nie sprawdza, czy istnieje widoczna etykieta albo wskazówka o formacie. Pola bez żadnej etykiety są zgłaszane przy kryteriach 1.3.1 i 4.1.2.
/ Kto je łamie, według naszych pomiarów
| Podmiot | Sektor | Wystąpienia | Wynik |
|---|---|---|---|
| Bundesministerium des Innern | government · DE | 1 | 10 |
| Gdynia | city · PL | 1 | 7 |
| Muzeum Narodowe w Warszawie | culture · PL | 1 | 11 |
Jedna strona na podmiot, mierzona automatycznie w tygodniowym cyklu. Jeśli podmiot coś naprawił od ostatniego pomiaru, zmiana będzie widoczna przy następnym, a każdy podmiot może odpowiedzieć na swojej stronie.
/ Pytania o to kryterium
Czy placeholder wystarczy jako etykieta pola formularza?
Nie. Placeholder znika, gdy człowiek zaczyna pisać, więc pole nie ma etykiety w trakcie wypełniania ani później, przy sprawdzaniu. Tekst placeholdera bywa też zbyt blady, żeby dało się go wygodnie przeczytać. Użyj widocznego elementu label, który zostaje na miejscu, a placeholdera, jeśli chcesz go mieć, użyj do pokazania przykładowej poprawnej wartości.
Jak oznaczać pola obowiązkowe, żeby były dostępne?
Widocznie i w kodzie. Na ekranie napisz w etykiecie „wymagane” albo użyj gwiazdki i wyjaśnij ją przed pierwszym polem. W kodzie dodaj do elementu input atrybut required, a do własnej kontrolki aria-required="true", żeby czytnik ekranu zapowiadał pole jako obowiązkowe. Gwiazdka bez wyjaśnienia i bez atrybutu zostawia w niepewności zarówno osoby widzące, jak i niewidome.
Czym różnią się kryteria 3.3.2 i 1.3.1 w sprawie etykiet formularzy?
3.3.2 pyta, czy istnieje etykieta lub instrukcja, którą człowiek może przeczytać. 1.3.1 Informacje i relacje pyta, czy ta etykieta jest w kodzie powiązana ze swoim polem, tak żeby oprogramowanie mogło podać jedno razem z drugim. Formularz może spełniać jedno i nie spełniać drugiego: widoczny tekst obok pola bez atrybutu for spełnia 3.3.2 i narusza 1.3.1.