Jak aria-label wpływa na nazwę dostępną
Przeglądarka wylicza nazwę dostępną w ustalonej kolejności. aria-labelledby ma pierwszeństwo przed aria-label. aria-label z kolei wygrywa z nazwą pochodzącą z natywnych mechanizmów HTML: z <label> pola formularza, atrybutu alt obrazka, atrybutu title ramki iframe i z tekstu wewnątrz przycisku lub linku.
W praktyce oznacza to, że przycisk z napisem „Zapisz” i atrybutem aria-label="Wyślij" zostanie odczytany jako „Wyślij”. Osoba, która widzi „Zapisz” i steruje stroną głosem, może nie trafić w ten przycisk.
Kiedy używać aria-label
- Przycisk lub link z samą ikoną, np. zamknij, szukaj, menu, koszyk.
- Kilka landmarków tego samego typu na stronie, np. nawigacja główna i nawigacja w stopce.
- Okno dialogowe lub region, którego tytułu nie ma na ekranie. Jeśli tytuł jest widoczny, lepiej wskazać go przez aria-labelledby.
- Pole formularza bez widocznej etykiety, gdy projekt naprawdę jej nie przewiduje. Widoczny <label> jest lepszy dla wszystkich użytkowników.
Kiedy nie używać aria-label
- Gdy wystarczy natywny HTML. Pierwsza zasada ARIA mówi: jeśli natywny element lub atrybut ma potrzebną semantykę i zachowanie, użyj go zamiast ARIA.
- Na elementach generycznych, np. div lub span bez roli. WAI-ARIA 1.2 zabrania nadawania nazwy między innymi rolom generic, paragraph, code, strong i emphasis, a technologie asystujące mogą taką nazwę pominąć.
- Gdy nazwa nie zawiera widocznego tekstu. Kryterium WCAG 2.5.3 Etykieta w nazwie (poziom A) wymaga, żeby nazwa dostępna zawierała tekst widoczny na komponencie. Najlepiej, gdy ten tekst stoi na początku nazwy.
- Do dłuższych wskazówek i instrukcji. Opis uzupełniający nazwę należy do aria-describedby.
aria-label, aria-labelledby i aria-describedby
MDN zaleca aria-labelledby zamiast aria-label, jeśli istnieje widoczna etykieta, do której można się odwołać. Nie ustawiaj obu atrybutów na jednym elemencie, bo aria-label zostanie pominięty.
| Atrybut | Co robi | Kiedy go użyć |
|---|---|---|
| aria-label | Nadaje nazwę z tekstu wpisanego w atrybut. Tekst nie jest widoczny. | Nie ma widocznego tekstu, na który można wskazać. |
| aria-labelledby | Nadaje nazwę z treści innego elementu (po id). Ma pierwszeństwo przed aria-label. | Na ekranie jest już nagłówek lub tekst, który dobrze nazywa element. |
| aria-describedby | Dodaje opis, np. wymagania hasła. Nie zastępuje nazwy. | Instrukcje, podpowiedzi i komunikaty pomocnicze. |
Przykłady
Pierwszy przykład pokazuje poprawne użycie: przycisk z ikoną i dwa landmarki nawigacji. Drugi pokazuje dwa częste błędy i ich poprawki.
<button type="button" aria-label="Zamknij">
<svg aria-hidden="true">…</svg>
</button>
<nav aria-label="Główna">…</nav>
<nav aria-label="Stopka">…</nav><!-- Błąd: nazwa nie zawiera widocznego tekstu (WCAG 2.5.3) -->
<button aria-label="Wyślij formularz">Zapisz</button>
<!-- Poprawka: usuń aria-label albo zacznij od widocznego tekstu -->
<button>Zapisz</button>
<!-- Błąd: nazwa na elemencie generycznym -->
<div aria-label="Cena">49 zł</div>
<!-- Poprawka: pokaż etykietę jako tekst -->
<p>Cena: 49 zł</p>Jak sprawdzić aria-label
Otwórz w narzędziach deweloperskich przeglądarki panel dostępności i sprawdź wyliczoną nazwę elementu oraz jej źródło. Automatyczne testy wykryją brak nazwy albo aria-label na niedozwolonej roli, ale nie ocenią, czy nazwa jest zrozumiała. To sprawdzisz czytnikiem ekranu, np. NVDA lub VoiceOver.
aria-label to atrybut ze standardu W3C WAI-ARIA, który nadaje elementowi nazwę dostępną odczytywaną przez czytnik ekranu. Tekst nie jest widoczny na stronie, dlatego stosuje się go głównie tam, gdzie brakuje widocznej etykiety, np. przy przycisku z samą ikoną.
aria-label podaje nazwę wprost jako tekst w atrybucie. aria-labelledby wskazuje po id inny element, którego treść staje się nazwą, i ma pierwszeństwo, gdy oba są ustawione. Jeśli na ekranie jest widoczny nagłówek lub etykieta, lepiej użyć aria-labelledby.
Na elemencie generycznym bez roli nie powinien być używany. WAI-ARIA 1.2 zabrania nadawania nazwy roli generic, a technologie asystujące mogą ją pominąć. Pokaż tekst na ekranie albo użyj elementu z odpowiednią rolą, np. button, nav lub section z nagłówkiem.
Nie zawsze, ale to częste źródło problemów. aria-label zastępuje tekst przycisku w nazwie dostępnej. Jeśli nie zawiera widocznego napisu, strona narusza kryterium WCAG 2.5.3 Etykieta w nazwie. Najczęściej wystarczy usunąć aria-label.
Nie powinien. Na obrazku aria-label ma pierwszeństwo przed alt, ale standardowym sposobem opisu obrazka w HTML jest alt, który działa bez ARIA. Dla ikon dekoracyjnych w przycisku dodaj aria-hidden="true" do ikony, a nazwę nadaj przyciskowi.
Źródła i dalsza lektura
- MDN: aria-label dokumentacja
- W3C: WAI-ARIA 1.2: aria-label standard
- W3C: Using ARIA (first rule of ARIA use) dokumentacja
- W3C: Understanding SC 2.5.3 Label in Name standard
- W3C: Understanding SC 4.1.2 Name, Role, Value standard