Przejdź do treści

Formularze: etykiety, komunikaty o błędach i autouzupełnianie

Czego wymagają kryteria

Kryterium 3.3.2 wymaga etykiet lub instrukcji przy polach formularza. Kryterium 3.3.1 wymaga, aby błąd był opisany tekstowo i wskazywał, które pole go dotyczy. Kryterium 3.3.3 wymaga podpowiedzi, jak błąd poprawić. Kryterium 1.3.5 wymaga oznaczenia przeznaczenia pól zbierających dane o użytkowniku.

Dlaczego to najdroższe uchybienie

Niedostępny opis produktu irytuje. Niedostępny formularz zamówienia zatrzymuje transakcję. To tutaj problem dostępności przekłada się wprost na utracony przychód, i to nie tylko od osób z niepełnosprawnościami.

Etykieta, nie tekst zastępczy

Najczęstszy błąd to formularz oparty wyłącznie na tekście zastępczym w polu. Taki tekst znika po rozpoczęciu pisania, ma zwykle za niski kontrast i nie zawsze jest odczytywany przez czytniki ekranu.

<!-- źle -->
<input type="email" placeholder="Twój e-mail">

<!-- dobrze -->
<label for="email">Adres e-mail</label>
<input type="email" id="email" name="email" autocomplete="email">

Atrybut autocomplete to nie tylko wygoda. Pozwala przeglądarce wypełnić pole danymi użytkownika, co dla osoby z niepełnosprawnością ruchową bywa różnicą między pięcioma sekundami a pięcioma minutami.

Komunikaty o błędach

Czerwona ramka wokół pola nie jest komunikatem. Informacja przekazana samym kolorem łamie kryterium 1.4.1. Komunikat musi być tekstem, powiązanym z polem, i musi mówić, co zrobić.

<label for="nip">NIP</label>
<input id="nip" name="nip" aria-describedby="nip-blad" aria-invalid="true">
<p id="nip-blad">NIP musi mieć 10 cyfr. Wpisano 9 cyfr.</p>

Przy wysłaniu formularza z błędami zbierz je w jednym miejscu na górze, każdy jako link do właściwego pola, i przenieś tam fokus. Osoba korzystająca z czytnika ekranu od razu usłyszy, ile jest błędów i gdzie są.

Czego unikać

Wróć do listy materiałów