Zasada 3: Zrozumiałość 3.3 Pomoc przy wprowadzaniu informacji

3.3.1 Identyfikacja błędu

WCAG 3.3.1 Error Identification

W skrócie

Jeśli formularz wykryje błąd, wskazuje, które pole jest błędne, i opisuje problem tekstem.

Poziom
A Podstawowe minimum – bez tego część osób w ogóle nie skorzysta ze strony.
Czy to obowiązkowe?
Wymagane prawem
Kto w zespole odpowiada
Programowanie, Projektowanie UX/UI
Jak to wykryć
Częściowo automatyczne

Wyjaśnienie prostym językiem: Komunikat o błędzie

Komu i dlaczego to pomaga

Sam czerwony kolor ramki nie wystarczy osobom niewidomym i z daltonizmem – potrzebny jest komunikat tekstowy, który czytnik ekranu odczyta.

  • Osoby niewidome
  • Osoby z zaburzeniami widzenia barw
  • Osoby z trudnościami poznawczymi

Jak zrobić to dobrze

  • Wyświetlaj komunikat tekstowy przy polu i powiąż go przez aria-describedby; oznacz pole aria-invalid="true".
  • Na górze formularza pokaż podsumowanie błędów z linkami do pól.

Najczęstsze błędy

  • Komunikat „Formularz zawiera błędy” bez wskazania, gdzie.
  • Błąd oznaczony tylko kolorem.
  • Komunikat błędu niepowiązany z polem (czytnik go nie odczyta przy polu).

Przykład w kodzie

Dobrze
<label for="email">E-mail</label>
<input id="email" type="email" aria-invalid="true" aria-describedby="email-blad">
<p id="email-blad">Wpisz adres e-mail w formacie nazwa@domena.pl</p>

Jak to sprawdzić

  1. Wyślij formularz z błędami (puste pola, zły e-mail) i sprawdź, czy każdy błąd jest opisany tekstem przy polu.
  2. Sprawdź czytnikiem ekranu, czy po wejściu w pole słychać komunikat błędu.

Częściowo automatyczne. Narzędzia wykryją część problemów (np. brak atrybutu), ale ocena jakości wymaga człowieka.

Czy to obowiązkowe?

Wymagane prawem

Kryterium poziomu A z WCAG 2.1 – obowiązkowe dla podmiotów publicznych (ustawa z 4 kwietnia 2019 r. o dostępności cyfrowej stron internetowych i aplikacji mobilnych) oraz dla firm objętych European Accessibility Act (ustawa o zapewnianiu spełniania wymagań dostępności przez niektóre produkty i usługi). Brak zgodności trzeba wykazać w deklaracji dostępności.

Naucz się tego w praktyce

Zobacz wszystkie kursy dostępności

Powiązane kryteria

3.3.3

Sugestie korekty błędów

Poziom AA Wymagane prawem

Jeśli wiadomo, jak poprawić błąd, komunikat podpowiada rozwiązanie (np. „Data musi mieć format DD.MM.RRRR”).

1.4.1

Użycie koloru

Poziom A Wymagane prawem

Kolor nie może być jedynym sposobem przekazania informacji – np. zaznaczenia błędu, wyróżnienia linku w tekście czy serii na wykresie.

4.1.3

Komunikaty o stanie

Poziom AA Wymagane prawem

Komunikaty o stanie (np. „Dodano do koszyka”, „Znaleziono 12 wyników”, „Formularz wysłany”), które pojawiają się bez przenoszenia fokusu, są ogłaszane przez czytnik ekranu.

Ostatnia aktualizacja: .
Źródło: Understanding SC 3.3.1: Error Identification – oficjalne objaśnienie W3C (po angielsku).