ARIA (Accessible Rich Internet Applications) to zestaw atrybutów, które dodają semantykę dostępności — role, stany i właściwości — które natywny HTML nie może wyrazić. Ale najważniejsza zasada ARIA to: preferuj natywny HTML na pierwszym miejscu.
Save
Save
Elementy natywne mają prawidłowe role, zachowanie klawiatury i fokus za darmo. Sięgaj po ARIA tylko wtedy, gdy żaden element natywny nie sprawdzi się.
<!-- 1. Roles — what an element IS (for custom widgets) -->
<div role="tablist"><div role="tab" aria-selected="true">Tab 1</div></div>
<!-- 2. States — current condition (dynamic) -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<input aria-invalid="true" aria-describedby="err" />
<!-- 3. Properties — relationships / labels -->
<input aria-label="Search" />
<div aria-labelledby="heading-id"></div>
<div aria-live="polite">3 results found</div> <!-- screen reader announces updates -->
<div aria-live="assertive" role="alert">Error saving!</div> <!-- interrupts -->
To naprawdę przydatna ARIA: informowanie czytników ekranu o treści, która zmienia się bez przeładowania strony (wyniki wyszukiwania, powiadomienia, błędy walidacji).
Niepoprawna ARIA jest gorsza niż brak ARIA — daje użytkownikom czytnika ekranu fałszywe informacje. A ARIA zmienia tylko semantykę, nigdy zachowanie: role="button" na <div> nie czyni go focusable ani clickable; musisz sam dodać tabindex i handlery zdarzeń klawiatury.
Używaj semantycznego HTML dla 95% przypadków; używaj ARIA, aby wypełnić luki w niestandardowych widgetach (zakładki, pola kombi, menu) i ogłaszać dynamiczne aktualizacje za pomocą live regions.
Postępuj zgodnie z zasadami — preferuj natywne, nie zmieniaj semantyki natywnej niepotrzebnie, utrzymuj stany zsynchronizowane i nigdy nie zastosuj roli, której w pełni nie implementujesz.