Atrybuty ARIA — co to jest?
Accessible Rich Internet Applications, czyli zestaw atrybutów HTML rozszerzających informacje o elementach interfejsu dla technologii asystujących. Dodają role, stany i właściwości, których standardowy HTML nie potrafi wyrazić.
Jak to działa?
ARIA wypełnia luki między tym, co widzi użytkownik wzrokowo, a tym, co "słyszy" czytnik ekranu. Na przykład, ikona X zamykająca modal jest wizualnie oczywista, ale czytnik ekranu widzi tylko pusty przycisk. Dodajesz aria-label="Zamknij" i czytnik wie, co robi ten przycisk. Kluczowe atrybuty to: aria-label (nazwa elementu), aria-describedby (dodatkowy opis), aria-expanded (czy element jest rozwinięty), aria-hidden (ukrywanie przed czytnikiem), role (rola elementu, np. role="dialog"). Zasada pierwsza ARIA: jeśli możesz użyć natywnego elementu HTML zamiast ARIA, zrób to.
Dlaczego to ważne?
ARIA to most między wizualnym interfejsem a technologiami asystującymi. Bez poprawnych atrybutów ARIA interaktywne elementy są nieużywalne dla osób korzystających z czytnika ekranu.