Przejdź do treści

Nazwa, rola i wartość: kiedy ARIA pomaga, a kiedy szkodzi

Czego wymaga kryterium

Kryterium 4.1.2 wymaga, aby każdy element interfejsu przekazywał technologiom asystującym trzy informacje: nazwę, czyli czym jest; rolę, czyli jak działa; oraz wartość i stan, czyli w jakiej jest sytuacji. Kryterium 4.1.3 dodaje wymóg ogłaszania komunikatów o statusie.

Pierwsza zasada ARIA

Oficjalna pierwsza reguła stosowania ARIA brzmi: nie używaj ARIA, jeżeli istnieje natywny element HTML, który robi to samo. Znacznik button ma rolę, obsługę klawiatury i stan wbudowane. Div z dopisaną rolą przycisku wymaga ręcznego dorobienia wszystkiego i zwykle coś zostaje pominięte.

<!-- niepotrzebnie skomplikowane i łatwe do zepsucia -->
<div role="button" tabindex="0" onclick="wyslij()">Wyślij</div>

<!-- działa od razu, także z klawiatury -->
<button type="button" onclick="wyslij()">Wyślij</button>

Źle użyta ARIA jest gorsza niż jej brak, bo nadpisuje prawidłowe informacje. Element z rolą, która nie odpowiada zachowaniu, wprowadza użytkownika w błąd.

Gdzie ARIA jest potrzebna

Przy elementach, których HTML nie ma: kartach, akordeonach, oknach modalnych, podpowiedziach wyszukiwania. Wtedy trzeba przekazać komplet informacji, łącznie ze stanem.

<button aria-expanded="false" aria-controls="panel-1">Parametry techniczne</button>
<div id="panel-1" hidden>…</div>

Stan trzeba aktualizować w kodzie przy każdej zmianie. Atrybut, który został na wartości początkowej, to typowa usterka wykrywana w audytach.

Komunikaty o statusie

Gdy po kliknięciu „dodaj do koszyka” pojawia się potwierdzenie, osoba niewidoma nie zobaczy go. Trzeba je ogłosić, ale bez przenoszenia fokusu, żeby nie przerywać pracy.

<div role="status" aria-live="polite">Dodano produkt do koszyka. W koszyku: 3</div>

Obszar z tym oznaczeniem musi istnieć w kodzie, zanim pojawi się w nim treść. Element wstawiony razem z komunikatem często nie zostanie ogłoszony.

Jak to sprawdzić

Automat wykryje brakujące nazwy i niepoprawne wartości atrybutów, ale nie oceni, czy rola pasuje do zachowania. To jedno z kryteriów, przy których test z czytnikiem ekranu jest niezastąpiony.

Wróć do listy materiałów