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>

Najczęstsze pytania

Czy ARIA zastępuje semantyczny HTML?

Nie. Natywny button, nav albo label ma wbudowaną semantykę i obsługę. ARIA stosuje się dopiero, gdy HTML nie opisuje wystarczająco własnego komponentu.

Jak sprawdzić ARIA?

Połącz automat axe/Lighthouse z testem czytnikiem ekranu. Poprawny atrybut składniowo może nadal opisywać niewłaściwy stan.

Poradniki na ten temat

• WCAG 2.2 — praktyczna checklista dostępności strony — Dostępność sprawdza się warstwami: automat znajduje powtarzalne błędy, klawiatura ujawnia problemy obsługi, a czytnik ekranu pokazuje, czy interfejs ma sens bez obrazu. Ta checklista prowadzi przez wszystkie trzy.

Źródła

• W3C — WAI-ARIA Authoring Practices
• MDN — ARIA

Wszystkie hasła · Cała Wiedza · Jak skanujemy