SEOMaster
ARIA
Atrybuty opisujące elementy dla czytników ekranu.
Co to jest ARIA?
ARIA (Accessible Rich Internet Applications) to zestaw atrybutów HTML, które dodają znaczenie elementom tam, gdzie sam HTML nie wystarcza — np. mówią czytnikowi ekranu, że dany element to „przycisk”, „zakładka” albo że właśnie się rozwinął.
Złota zasada brzmi: najpierw używaj natywnych elementów HTML (button, nav, label), a ARIA stosuj dopiero, gdy budujesz komponent, którego HTML nie ma. Źle użyta ARIA potrafi zaszkodzić bardziej niż jej brak.
Dlaczego to ważne dla SEO
Dla osób korzystających z czytników ekranu ARIA bywa różnicą między działającym a bezużytecznym interfejsem (menu, modale, karuzele). Poprawne role i stany czynią dynamiczne komponenty zrozumiałymi.
Jak to sprawdzić
Przetestuj komponenty czytnikiem ekranu (NVDA, VoiceOver). Audyty (axe, Lighthouse) wykrywają błędne lub sprzeczne atrybuty ARIA.
Częste błędy
- ARIA zamiast natywnego HTML (div z role=button zamiast <button>)
- Ustawianie ról bez aktualizowania stanów (aria-expanded)
- Sprzeczne lub zdublowane etykiety
Przykład
<button aria-expanded="false" aria-controls="menu">Menu</button>