ARIA (Accessible Rich Internet Applications) to zestaw atrybutów HTML, które opisują role, właściwości i stany elementów interfejsu technologiom asystującym, takim jak czytniki ekranu. Używa się ich tam, gdzie natywny HTML nie wystarcza.
Pierwsza zasada ARIA
Jeśli istnieje natywny element HTML o potrzebnej funkcji, użyj go zamiast ARIA. Przycisk <button> jest dostępny od razu, a <div role="button"> wymaga dodatkowej obsługi klawiatury i fokusu.
Przykłady atrybutów
-
aria-label– nazwa elementu bez widocznego tekstu, -
aria-expanded– stan rozwinięcia menu lub akordeonu, -
aria-live– zapowiadanie dynamicznych zmian, -
aria-hidden– ukrycie elementu przed czytnikami.
Atrybuty ARIA zmieniają jedynie to, co widzą technologie asystujące, ale nie dodają zachowania, np. obsługi klawiatury. Dlatego natywne elementy HTML, takie jak button, są lepsze niż div z rolą. Specyfikację publikuje W3C.
Czy więcej ARIA znaczy lepsza dostępność?
Nie. Błędnie użyta ARIA pogarsza dostępność bardziej niż jej brak. Dodawaj ją tylko wtedy, gdy rozumiesz skutek, i testuj z czytnikiem ekranu.
W pracy nad produktem uwzględnia się to na kolejnych etapach, jakie obejmuje proces projektowania UX.
Zobacz w praktyce
Proces projektowania UX krok po kroku – od badań do testów 
Audyt techniczny SEO krok po kroku 
Jak zmniejszyć rozmiar DOM i przyspieszyć stronę