aria-label a aria-labelledby

Gdy natywne etykietowanie nie wystarcza, dostępne są dwa narzędzia ARIA: aria-label dla tekstu wpisanego bezpośrednio oraz aria-labelledby do wskazywania istniejącego tekstu.

Proszę użyć aria-label, gdy nie ma widocznego tekstu, który można wykorzystać. Nazwę odczytywaną na głos wpisuje się bezpośrednio w samym elemencie.

Proszę użyć aria-labelledby, gdy widoczny tekst na stronie może pełnić funkcję nazwy. Wartością jest id tego elementu, a nie ciąg znaków.

W pierwszej kolejności proszę sięgać po aria-labelledby. Ponowne użycie tekstu widocznego na ekranie automatycznie synchronizuje nazwę odczytywaną na głos z nazwą widoczną.

Do aria-labelledby można podać kilka identyfikatorów rozdzielonych spacjami. Przeglądarka połączy tekst tych elementów w podanej kolejności w jedną nazwę.

Jeśli oba atrybuty są obecne, wygrywa aria-labelledby. Przeglądarka całkowicie ignoruje aria-label, dlatego nie należy oczekiwać ich połączenia.

Za pomocą aria-labelledby element może wskazywać własny identyfikator. Przydaje się to do nadania regionowi nazwy na podstawie widocznego tekstu jego nagłówka.

aria-label nigdy nie pojawia się na ekranie. Zmienia wyłącznie to, co ogłaszają technologie asystujące, więc widzący użytkownicy nie zauważą różnicy.

aria-label to zwykły tekst, który tłumacze stron często pomijają, podczas gdy labelledby ponownie wykorzystuje widoczną treść, która zostaje przetłumaczona.

Identyfikator w aria-labelledby musi odpowiadać rzeczywistemu id elementu. Literówka po cichu pozostawi element bez obliczonej nazwy.

Proszę ustalić, gdzie znajduje się nazwa. Jeśli jest już widoczna na ekranie, należy użyć aria-labelledby; jeśli istnieje wyłącznie dla technologii asystujących, należy użyć aria-label.

Dowiedział się Pan/Dowiedziała się Pani, aby używać aria-labelledby dla istniejącego widocznego tekstu, a aria-label dla niewidocznych nazw wpisywanych bezpośrednio — bez oczekiwania, że oba atrybuty się połączą. 🎯