Pięć zasad używania ARIA
- Pierwsza zasada ARIA: nie używaj ARIA, jeśli istnieje natywny element HTML (button, nav, details).
- Nie zmieniaj natywnej semantyki bez potrzeby (np. <button role="heading">).
- Każdy interaktywny element z rolą ARIA musi być obsługiwalny klawiaturą.
- Nie ukrywaj fokusowalnych elementów przez role="presentation" ani aria-hidden="true".
- Każdy element interaktywny musi mieć dostępną nazwę (accessible name).
Najczęstsze błędy
Raport WebAIM Million (2025) wskazuje korelację: strony używające ARIA mają średnio więcej wykrytych błędów dostępności niż te bez niej. To nie dowód, że ARIA powoduje błędy — częściej źle użyta ARIA aktywnie psuje doświadczenie czytnika ekranu. Typowe problemy to role bez wymaganych atrybutów, sprzeczne stany i „ARIA zamiast HTML”.
Przykład
Przycisk rozwijający panel — aria-expanded komunikuje stan otwarty/zamknięty czytnikowi ekranu. Natywny <button> działa z klawiaturą (Enter/Space) bez dodatkowej implementacji. Skrypt musi natomiast zmieniać stan panelu oraz aktualizować aria-expanded.
HTML
<button type="button" aria-expanded="false" aria-controls="panel-faq">
Pokaż odpowiedź
</button>
<div id="panel-faq" hidden>
Treść odpowiedzi…
</div>HTML
<div role="button" tabindex="0" aria-expanded="false">
Pokaż odpowiedź
</div>Źródła i dalsza lektura
- W3C — WAI-ARIA 1.2 (Rekomendacja) standard
- MDN — ARIA dokumentacja
- W3C — ARIA Authoring Practices Guide (APG) dokumentacja
- WebAIM Million — The 2025 report publikacja