𝗛𝗼𝘄 𝘁𝗼 𝗪𝗶𝗿𝗲 𝗔𝗥𝗜𝗔 𝗙𝗼𝗿 𝗙𝗼𝗿𝗺 𝗘𝗿𝗿𝗼𝗿𝘀 -> Jak połączyć ARIA z błędami w formularzach

Większość formularzy działa dobrze dla użytkowników widzących, ale zawodzi w przypadku osób korzystających z technologii asystujących. Użytkownik widzący widzi czerwoną obwódkę i komunikat o błędzie. Użytkownik czytnika ekranu często nie słyszy nic.

Możesz to naprawić za pomocą dwóch atrybutów ARIA i małego regionu live (live region). Ta zmiana zajmuje mniej niż 50 linii kodu.

Oto jak połączyć błędy z polami wejściowymi.

  1. Użyj aria-describedby Pole wejściowe musi wskazywać na element błędu. Dodaj aria-describedby do swojego pola i ustaw jego wartość na ID elementu div z błędem.

Przykład:

  • ID pola: email-input
  • ID błędu: email-error
  • Kod: aria-describedby="email-error"

Informuje to czytnik ekranu, aby odczytał komunikat o błędzie, gdy użytkownik skupi się na polu. Możesz dodać wiele ID, jeśli posiadasz również tekst pomocniczy.

  1. Użyj aria-invalid Ten atrybut informuje użytkownika, że wpisana wartość jest błędna. Ustaw aria-invalid na true, gdy pojawi się błąd. Ustaw na false, gdy błąd zostanie usunięty.

Częstym błędem jest stylowanie kontenera div na czerwono, przy jednoczesnym umieszczeniu aria-invalid tylko na samym polu wejściowym. Powoduje to niespójność. Upewnij się, że style wizualne i atrybuty ARIA dotyczą tego samego elementu.

  1. Dodaj region live Jeśli błąd pojawi się, gdy użytkownik wciąż pisze, może go przeoczyć. Użyj aria-live="polite" na swoim elemencie div z błędem.
  • aria-live="polite" informuje czytnik ekranu, aby ogłosił błąd podczas naturalnej przerwy.
  • Nie używaj "assertive", chyba że jest to sytuacja awaryjna. Błędy w formularzach nie są sytuacjami awaryjnymi.
  1. Obsłuż walidację asynchroniczną Jeśli sprawdzasz nazwę użytkownika lub adres w tle, użytkownicy muszą wiedzieć, że system pracuje.
  • Wzorzec A: Użyj aria-busy="true" na polu wejściowym podczas trwania sprawdzania.
  • Wzorzec B: Użyj ukrytego regionu live, aby ogłaszać aktualizacje statusu, takie jak „Weryfikacja nazwy użytkownika...”.

Wzorzec B jest bardziej niezawodny w różnych czytnikach ekranu.

Testowanie jest obowiązkowe. Narzędzia automatyczne są pomocne, ale nie zastąpią testów manualnych. Użyj NVDA na Windows lub VoiceOver na macOS.

Twoja lista kontrolna testów:

  • Przejdź do pola za pomocą klawisza Tab. Etykieta powinna zostać ogłoszona.
  • Wprowadź nieprawidłową wartość. Błąd powinien zostać ogłoszony.
  • Wróć do pola klawiszem Tab. Etykieta powinna zostać ogłoszona wraz z błędem.
  • Napraw błąd. Komunikat o błędzie powinien zniknąć.

Źródło: https://dev.to/137foundry/how-to-wire-aria-describedby-and-aria-invalid-on-form-errors-without-breaking-your-styles-4583