Identyfikacja błędów
Gdy użytkownik popełni automatycznie wykryty błąd w formularzu, musi on zostać zidentyfikowany i opisany w tekście — nie samym kolorem, nie samą ikoną, nie ciszą.
Czego wymaga
Jeśli pole formularza jest nieprawidłowe (zły format, brak wymaganej wartości, wartość spoza zakresu) i system automatycznie to wykryje, błąd musi zostać zakomunikowany użytkownikowi opisem tekstowym. Tekst musi wskazywać, które pole jest nieprawidłowe i co jest nie tak — nie tylko że „coś” się nie powiodło.
Kryterium nie wymaga, by system wykrywał każdy możliwy błąd; wymaga, by wykryte błędy były prezentowane użytkownikowi jako tekst.
Jak spełnić kryterium
- Do każdego pola formularza dołącz widoczny komunikat o błędzie opisujący problem, umieszczony przy polu lub poniżej.
- Wskaż błędne pole z nazwy: „Adres e-mail musi zawierać znak @”.
- Połącz komunikat błędu z polem za pomocą
aria-describedby, aby czytniki ekranu ogłaszały go po ustawieniu fokusu. - Użyj
aria-invalid="true"na błędnym polu. - Przy walidacji po stronie serwera wyrenderuj listę podsumowującą na górze formularza, z każdym elementem linkującym do błędnego pola.
- Ogłaszaj dynamiczne komunikaty o błędach przez live region (
aria-live="polite"lubrole="alert"), aby czytniki ekranu usłyszały błąd bez konieczności szukania go przez użytkownika.
Typowe błędy
- Czerwone obramowania wokół nieprawidłowych pól bez tekstowego wyjaśnienia.
- Ogólny baner z komunikatem „Formularz nieprawidłowy” bez wskazania, które pola są błędne.
- Komunikaty błędów wyłącznie w dymkach, znikające po utracie fokusu.
- Natywna walidacja przeglądarki (
required,pattern) używana samodzielnie — dymek przeglądarki jest zawodny dla czytników ekranu i znika zbyt szybko. - Wskaźniki błędów wyłącznie ikonkowe (czerwony wykrzyknik) bez dostępnej nazwy.
Dlaczego to jest ważne
To najczęściej cytowany błąd pomocy przy wprowadzaniu danych w audytach. Dla widzących użytkowników czerwone obramowanie to przynajmniej wskazówka; dla użytkowników czytników ekranu może równie dobrze nie istnieć. Dla użytkowników z daltonizmem czerwone obramowanie w ogóle nie daje sygnału. Gdy użytkownik wypełni długi formularz i wysłanie milcząco się nie powiedzie, prawdopodobnie porzuci go — a dostępność jest właśnie tym powodem, dla którego to jemu się nie powiodło.
Połącz 3.3.1 z 3.3.3 (Sugestia błędu) i 4.1.3 (Komunikaty o stanie) — razem tworzą nowoczesny wzorzec obsługi błędów formularza.