Stan Stan widgetu

`aria-invalid`

Wskazuje, że element sterujący formularza nie przeszedł walidacji. Łącz z aria-describedby wskazującym na komunikat błędu w czytelnym języku, by czytnik ekranu ogłosił zarówno stan błędu, jak i jego przyczynę.

Kiedy używać

Na polu input, textarea, comboboxie, listboxie lub innym widżecie formularza, którego bieżąca wartość nie przeszła walidacji. Ustaw aria-invalid="true" po tym, jak użytkownik miał szansę wprowadzić wartość — zazwyczaj po opuszczeniu pola lub po wysłaniu formularza. Ustawianie go przy pierwszym renderowaniu, zanim użytkownik cokolwiek wpisał, jest irytujące i ogłasza puste wymagane pola jako nieprawidłowe, zanim użytkownik cokolwiek zrobił.

Łącz go z właściwym komunikatem błędu. Wzorzec jest następujący:

Wyrenderuj widoczny komunikat błędu z własnym id.
Ustaw aria-invalid="true" na polu input.
Wskaż aria-describedby na id komunikatu błędu.

Czytniki ekranu ogłaszają wtedy zarówno stan błędu, jak i wyjaśnienie: „Adres e-mail, pole edycji, nieprawidłowy wpis, proszę podać prawidłowy adres e-mail”.

Jak utrzymywać synchronizację

Prawidłowe wartości to "true", "false", "grammar" i "spelling". W praktyce używane są głównie "true" i "false". Wartości "grammar" i "spelling" są stosowane przez edytory tekstu sformatowanego do oznaczania konkretnego fragmentu; większość przepływów formularzy ich nie potrzebuje.

Domyślnie ustaw "false" (lub pomiń). Gdy walidacja się nie powiedzie, ustaw "true" i ujawnij komunikat błędu. Gdy użytkownik poprawi pole, wyczyść oba — przełącz aria-invalid z powrotem na "false" i usuń lub ukryj komunikat błędu — w tym samym momencie.

Atrybut HTML required i pseudoklasa CSS :invalid działają niezależnie. aria-invalid to bit konsumowany przez czytniki ekranu; pozostałe służą przeglądarkom i stylizacji. Utrzymuj je zsynchronizowane.

Typowe błędy

Ustawianie aria-invalid="true" zanim użytkownik miał szansę wejść w interakcję z polem.
Oznaczanie pola jako nieprawidłowego bez aria-describedby i bez widocznego komunikatu błędu — czytnik ekranu ogłasza „nieprawidłowy” bez żadnego wyjaśnienia.
Pozostawianie aria-invalid="true" po tym, jak użytkownik poprawił wartość.
Wskazywanie aria-describedby na pusty kontener, przez co ogłoszenie błędu jest ciche.
Używanie aria-invalid na <fieldset> lub innych kontenerach niebędących polami input — nie ma tam znaczenia.
Poleganie wyłącznie na kolorze do wskazania stanu błędu — aria-invalid pomaga czytnikam ekranu; nadal potrzebujesz widocznej etykiety lub ikony dla użytkowników widzących (WCAG 1.4.1).

Przykład

<label for="email">Adres e-mail</label>
<input
  id="email"
  type="email"
  aria-invalid="true"
  aria-describedby="email-error"
  required
>
<p id="email-error">Proszę podać prawidłowy adres e-mail.</p>