aria-*

Atrybuty ARIA opisują elementy dla czytników ekranu: nadają im nazwy, łączą je z opisami i informują o ich stanie.

Dotyczy: Wszystkie elementy HTML, ale każdy atrybut ARIA ma własne zasady użycia

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Najważniejsze atrybuty aria-*
Więcej przykładów
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

HTML

<style>
  .menu-button { padding: 6px 10px; font-size: 18px; line-height: 1; }
  .menu { list-style: none; margin: 10px 0 0; padding: 0; }
  .menu li { margin-bottom: 6px; }
  .menu a { color: #d4d4d4; }
  .menu a[aria-current="page"] { color: #c4b5fd; font-weight: 600; }
</style>

<button type="button" class="menu-button"
  aria-label="Menu" aria-expanded="false" aria-controls="main-menu"
  onclick="
    const open = this.getAttribute('aria-expanded') === 'true';
    this.setAttribute('aria-expanded', String(!open));
    document.getElementById('main-menu').hidden = open;
  ">
  <span aria-hidden="true">☰</span>
</button>

<ul class="menu" id="main-menu" hidden>
  <li><a href="#">Kursy</a></li>
  <li><a href="#" aria-current="page">Dokumentacja</a></li>
  <li><a href="#">Cennik</a></li>
</ul>

Podgląd

Przycisk ma tylko ikonę, więc nazwę „Menu” dostaje z aria-label, a sama ikona jest ukryta przed czytnikami przez aria-hidden. Kliknięcie przełącza aria-expanded, a aria-current="page" wskazuje bieżącą stronę. Z tego ostatniego atrybutu korzysta tu też CSS, który wyróżnia aktywny link.

Definicja i zastosowanie

Atrybuty zaczynające się od aria- pochodzą ze specyfikacji WAI-ARIA. Uzupełniają informacje, które technologie asystujące, takie jak czytniki ekranu, odczytują ze strony: jak element się nazywa, co go opisuje, czy jest rozwinięty, czy wskazuje bieżącą stronę. Na ekranie niczego nie zmieniają, a przeglądarka nie dodaje przez nie żadnego zachowania.

Zanim po nie sięgniesz, pamiętaj o pierwszej zasadzie ARIA: jeśli natywny element HTML zapewnia potrzebną nazwę i stan, użyj go. <label> nazywa pole lepiej niż aria-label, bo jego tekst widzą wszyscy, a <details> rozwija się i informuje o stanie bez aria-expanded. ARIA jest na sytuacje, których HTML sam nie obsłuży: przycisk z samą ikoną, własne menu rozwijane, komunikaty pojawiające się bez przeładowania strony.

W praktyce najczęściej używa się trzech grup atrybutów. Nazwy i opisy (aria-label, aria-labelledby, aria-describedby) mówią, jak element się nazywa i co warto o nim wiedzieć. Stany (aria-expanded, aria-current, aria-hidden) zmieniasz skryptem razem ze zmianą interfejsu. Regiony na żywo (aria-live) sprawiają, że czytnik ogłasza nową treść, choć użytkownik jest w innym miejscu strony.

ARIA nie aktualizuje się sama. Jeśli przycisk ma aria-expanded="false", a po kliknięciu menu się rozwija, skrypt musi zmienić wartość na true. Nieaktualny stan wprowadza w błąd bardziej niż jego brak.

Składnia

<element aria-nazwa="wartość">…</element>

Najważniejsze atrybuty aria-*

aria-label
tekst
Nazwa elementu dla czytników ekranu, gdy nie ma widocznego napisu, np. przycisku z samą ikoną. Zastępuje treść elementu. Na zwykłym <div> i <span> bez roli czytniki zwykle go pomijają.
aria-labelledby
lista id
Nazwa pobrana z innego elementu, np. z nagłówka sekcji. Możesz podać kilka identyfikatorów oddzielonych spacjami. Ma pierwszeństwo przed aria-label.
aria-describedby
lista id
Wskazuje dodatkowy opis, np. podpowiedź do pola albo komunikat błędu. Czytnik odczytuje go po nazwie elementu.
aria-hidden
true | false
Ukrywa element i całą jego zawartość przed czytnikami ekranu, ale nie na ekranie. Do ikon i ozdobników. Nigdy nie ukrywaj tak elementów, na których może być fokus.
aria-expanded
true | false
Stan przycisku, który pokazuje i ukrywa inny fragment strony, np. menu albo odpowiedź w FAQ. Aktualizuj go skryptem przy każdym kliknięciu.
aria-current
page | step | location | date | time | true
Oznacza bieżący element w zestawie: aktywny link w menu (page), bieżący krok formularza (step) albo dzisiejszą datę w kalendarzu (date).
aria-live
off | polite | assertive
Zamienia element w region na żywo: czytnik ogłasza zmiany jego treści. polite czeka, aż czytnik skończy mówić, a assertive przerywa od razu. Region musi istnieć na stronie, zanim zmienisz jego treść.

Atrybut	Wartość	Opis
aria-label	tekst	Nazwa elementu dla czytników ekranu, gdy nie ma widocznego napisu, np. przycisku z samą ikoną. Zastępuje treść elementu. Na zwykłym `<div>` i `<span>` bez roli czytniki zwykle go pomijają.
aria-labelledby	lista id	Nazwa pobrana z innego elementu, np. z nagłówka sekcji. Możesz podać kilka identyfikatorów oddzielonych spacjami. Ma pierwszeństwo przed `aria-label`.
aria-describedby	lista id	Wskazuje dodatkowy opis, np. podpowiedź do pola albo komunikat błędu. Czytnik odczytuje go po nazwie elementu.
aria-hidden	true \| false	Ukrywa element i całą jego zawartość przed czytnikami ekranu, ale nie na ekranie. Do ikon i ozdobników. Nigdy nie ukrywaj tak elementów, na których może być fokus.
aria-expanded	true \| false	Stan przycisku, który pokazuje i ukrywa inny fragment strony, np. menu albo odpowiedź w FAQ. Aktualizuj go skryptem przy każdym kliknięciu.
aria-current	page \| step \| location \| date \| time \| true	Oznacza bieżący element w zestawie: aktywny link w menu (`page`), bieżący krok formularza (`step`) albo dzisiejszą datę w kalendarzu (`date`).
aria-live	off \| polite \| assertive	Zamienia element w region na żywo: czytnik ogłasza zmiany jego treści. `polite` czeka, aż czytnik skończy mówić, a `assertive` przerywa od razu. Region musi istnieć na stronie, zanim zmienisz jego treść.

Więcej przykładów

Podpowiedź do pola i komunikat na żywo

HTML

<style>
  .hint { margin: 4px 0 8px; color: #a3a3a3; font-size: 14px; }
</style>

<form onsubmit="
  event.preventDefault();
  const nick = this.elements.nick.value.trim();
  const valid = nick.length >= 3 && nick.length <= 16 && !nick.includes(' ');
  document.getElementById('nick-status').textContent = valid
    ? 'Zapisano nick ' + nick + '.'
    : 'Nick musi mieć od 3 do 16 znaków i nie może zawierać spacji.';
">
  <label for="nick">Nick w rankingu</label>
  <input id="nick" name="nick" type="text" aria-describedby="nick-hint">
  <p id="nick-hint" class="hint">Od 3 do 16 znaków, bez spacji.</p>
  <button>Zapisz nick</button>
  <p id="nick-status" aria-live="polite"></p>
</form>

Podgląd

Czytnik ekranu przeczyta nazwę pola z etykiety, a po niej podpowiedź wskazaną przez aria-describedby. Wynik zapisu trafia do akapitu z aria-live="polite", który jest na stronie od początku, więc czytnik ogłosi komunikat, choć fokus zostaje na przycisku.

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Nie dawaj aria-label elementom z widocznym napisem, który mówi coś innego. Osoby sterujące komputerem głosem wypowiadają to, co widzą na ekranie, a program zna tylko nazwę z ARIA.
aria-hidden="true" na elemencie, na którym może być fokus, tworzy „ducha”: klawiatura do niego trafia, ale czytnik ekranu milczy. Takie elementy ukrywaj atrybutem hidden albo inert.
Sprawdzaj efekt w prawdziwym czytniku ekranu. Na Macu masz wbudowany VoiceOver (Cmd + F5), a na Windows możesz pobrać darmowy NVDA.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz HTML w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs