Oznaczanie nieprawidłowego stanu za pomocą aria-invalid

Czerwona obwódka informuje osoby widzące, że walidacja pola się nie powiodła. Użytkownik czytnika ekranu nie widzi koloru, dlatego informację o błędzie trzeba wyrazić w kodzie. 🚫

Atrybut aria-invalid oznacza, że kontrolka nie przeszła walidacji. Ustawienie jego wartości na true sprawia, że technologie wspomagające ogłaszają stan błędu.

Pole bez aria-invalid jest traktowane jako prawidłowe. aria-invalid="true" należy dodać dopiero wtedy, gdy walidacja rzeczywiście się nie powiedzie.

Gdy użytkownik poprawi wartość, ustaw aria-invalid na false albo usuń ten atrybut. Pozostawienie wartości true powoduje ogłaszanie błędu, który już nie istnieje.

Stosuj aria-invalid dopiero wtedy, gdy rzeczywiście przeprowadzasz walidację, a nie podczas ładowania strony. Oznaczanie pustych pól jako nieprawidłowych, zanim użytkownik zacznie pisać, jest nieprzyjazne.

aria-invalid informuje, że coś jest nie tak, ale nie wyjaśnia co. Zawsze łącz go z aria-describedby, aby użytkownik usłyszał również przyczynę.

Gdy fokus przechodzi do nieprawidłowego pola, czytnik ekranu wypowiada słowo invalid wraz z jego nazwą. Użytkownik od razu wie, że musi je poprawić.

W CSS możesz odwołać się do tego atrybutu, aby wyświetlić czerwoną obwódkę. Dzięki temu warstwa wizualna i semantyka pozostają idealnie zsynchronizowane.

aria-invalid przyjmuje również wartości takie jak grammar lub spelling. W większości formularzy zwykłe true jest dokładnie tym, czego potrzebujesz.

Nigdy nie polegaj wyłącznie na klasie red jako oznaczeniu błędu. Klasa jest niewidoczna dla technologii asystujących; to aria-invalid przenosi znaczenie.

Oznaczaj każde niepoprawne pole osobno. Ustawienie aria-invalid na elemencie otaczającym lub formularzu nie wskazuje użytkownikom, które pole wymaga uwagi.

Co właściwie komunikuje aria-invalid="true"?

Używaj aria-invalid do oznaczania niepoprawnych pól, ustawiaj je na true przy błędzie i na false po poprawieniu, a także łącz je z opisanym komunikatem o błędzie. ✅