Strona główna >WWW >Leksykon HTML – elementy i atrybuty >aria-* – atrybuty dostępności

aria-* – atrybuty dostępności

<button aria-label="Zamknij" aria-expanded="false">…</button>

Atrybuty WAI-ARIA uzupełniają drzewo dostępności – to, co użytkownicy czytników ekranu słyszą i wiedzą o elemencie: jego nazwę, opis, stan (rozwinięty, wybrany, nieprawidłowy) i relacje między elementami. Nie wpływają na wygląd ani zachowanie. Pierwsza zasada ARIA brzmi: jeśli istnieje do tego element HTML (button, nav, label), użyj go – ARIA jest tylko do tego, czego HTML nie potrafi.

Wartości

  • aria-label – nazwa elementu, gdy nie ma widocznego tekstu (przycisk z ikoną).
  • aria-labelledby – nazwa z innego elementu (id nagłówka okna albo sekcji).
  • aria-describedby – dodatkowy opis z innego elementu (pomoc, błąd przy polu).
  • aria-expanded – czy sterowana część jest rozwinięta (true/false); aria-controls – id sterowanej części.
  • aria-current – bieżąca pozycja (page w menu, step w procesie).
  • aria-hidden="true" – ukrywa element przed czytnikami ekranu (ikony dekoracyjne); zostaje widoczny.
  • aria-live – obszar, którego zmiany czytnik ekranu ogłasza: polite (gdy skończy mówić), assertive (od razu).
  • aria-invalid, aria-required, aria-pressed, aria-selected, aria-checked – stany.
  • Dotyczy: wszystkich elementów (każdy atrybut tylko dla ról, dla których jest przeznaczony)
  • W JavaScripcie: element.ariaLabel, element.ariaExpanded… (albo getAttribute('aria-label'))

Przykłady

Przycisk z ikoną, rozwijane menu i błąd przy polu:

<button type="button" aria-label="Zamknij">
  <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path fill="currentColor" d="M5 5l14 14M19 5L5 19" stroke="currentColor" stroke-width="2"/></svg>
</button>
<button type="button" aria-expanded="false" aria-controls="menu-list">Menu</button>
<ul id="menu-list" hidden>…</ul>
<label for="e-email">E-mail</label>
<input type="email" id="e-email" aria-invalid="true" aria-describedby="e-error">
<p id="e-error">Podaj adres e-mail w formacie anna@example.com.</p>

Obszar, którego zmiany ogłasza czytnik ekranu (dodanie do koszyka):

<p aria-live="polite" id="cart-message"></p>

Dostępność

Złe ARIA szkodzi bardziej niż jego brak: aria-hidden="true" na elemencie z fokusem, aria-label, który nie pasuje do widocznego tekstu, albo aria-expanded, którego skrypt nie aktualizuje. Stan w ARIA musi zawsze odpowiadać rzeczywistości – przeglądarka nie zmieni go za ciebie.

Na co uważać

  • Czytniki ekranu pomijają aria-label na elemencie bez roli (div, span).
  • Widoczny tekst przycisku powinien zawierać się w jego aria-label – użytkownicy sterowania głosowego mówią to, co widzą.
  • Obszar z aria-live musi być na stronie, zanim trafi do niego tekst – obszar na żywo wstawiony razem ze swoim tekstem często nie zostaje ogłoszony.
  • Elementy HTML mają własne role i stany: button nie potrzebuje role="button", a details nie potrzebuje aria-expanded.

Zobacz też:
role – rola elementu (atrybut)
label – etykieta pola
button – przycisk
hidden – ukryty element (atrybut)
inert – nieaktywna część strony (atrybut)