WCAG 2.5.3 Etykieta w nazwie

Kryterium sukcesu 2.5.3 sprawia, że sterowanie głosem działa. Osoby, które nie mogą używać myszy ani klawiatury, często obsługują stronę, wypowiadając widoczny tekst — „kliknij Dodaj do koszyka”. Działa to tylko wtedy, gdy dostępna nazwa elementu (to, pod jaką nazwą zna go oprogramowanie) zawiera widoczne słowa. Dzięki temu użytkownicy czytników ekranu i ich widzący współpracownicy mówią też o tym samym. To poziom A, część normy EN 301 549 (punkt 9.2.5.3).

Czego wymaga kryterium

W przypadku komponentów interfejsu użytkownika z etykietami zawierającymi tekst lub obrazy tekstu nazwa zawiera tekst prezentowany wizualnie.

• „Etykieta” to widoczny tekst, który identyfikuje element sterujący — tekst przycisku, tekst linku albo tekst obok pola formularza.
• „Nazwa” to dostępna nazwa przekazywana technologiom wspomagającym; może pochodzić z treści tekstowej, z <label>, z aria-label lub z aria-labelledby.
• Dobra praktyka W3C: umieścić widoczny tekst etykiety na początku nazwy. Dodatkowe słowa po nim są w porządku.

Elementy bez widocznego tekstu (przycisk z samą ikoną) nie są objęte tym kryterium, choć nadal potrzebują nazwy zgodnie z 4.1.2.

Typowe błędy w sklepie internetowym

• przycisk z napisem „Kup” z aria-label="Zakup produkt";
• przycisk „Szukaj”, którego aria-label brzmi „Wyślij zapytanie”;
• pole z widoczną etykietą „Kod pocztowy”, którego aria-label mówi „ZIP”;
• link „Kup teraz” z aria-label="Przejdź do kolekcji letniej";
• przetłumaczone sklepy, w których widoczny tekst jest przetłumaczony, ale wpisany na sztywno aria-label zostaje po angielsku.

Jak to sprawdzić

Automatycznie: nasz skaner porównuje widoczny tekst elementów sterujących z ich dostępnymi nazwami i oznacza nazwy, które nie zawierają widocznego tekstu (reguła niezgodności etykiety i nazwy). W axe-core reguła jest oznaczona jako eksperymentalna i nie radzi sobie z każdym przypadkiem (np. z tekstem na obrazach lub ikonami z symbolami), dlatego jej wyniki trzeba przejrzeć i wyrywkowo sprawdzić ręcznie.

Ręcznie: sprawdzić przyciski, linki i pola w panelu dostępności przeglądarki i porównać „Nazwę” z tym, co widać. Albo użyć sterowania głosem (Voice Control w macOS i iOS, Voice Access w Androidzie) i powiedzieć „kliknij” oraz widoczny tekst ważnych elementów.

Jak to naprawić

• Jako nazwy używać przede wszystkim widocznego tekstu; aria-label dodawać tylko wtedy, gdy coś wnosi.
• Jeśli używa się aria-label, zaczynać go dokładnie od widocznego tekstu: aria-label="Dodaj do koszyka – lniana koszula".
• Łączyć pola formularza z ich widoczną etykietą przez <label for> zamiast osobnego aria-label.
• Tłumaczyć wartości aria-label razem z widocznym tekstem.

Powiązane kryteria

• 2.4.6 Nagłówki i etykiety — etykiety muszą opisywać cel.
• 2.4.4 Cel łącza (w kontekście) — tekst linku musi mówić, dokąd prowadzi.
• 2.1.4 Jednoznakowe skróty klawiaturowe — kolejne kryterium ważne dla osób sterujących głosem.

Najczęstsze pytania

Czego wymaga WCAG 2.5.3 Etykieta w nazwie?

W przypadku elementów sterujących, których etykieta zawiera tekst lub obraz tekstu, dostępna nazwa musi zawierać tekst widoczny na ekranie. W3C zaleca umieszczenie tego tekstu na początku nazwy.

Czy aria-label to problem dla 2.5.3?

Tylko wtedy, gdy zastępuje widoczny tekst innymi słowami. Przycisk z napisem „Kup” i aria-label="Zakup ten produkt" nie spełnia kryterium; aria-label="Kup teraz – lniana koszula" zawiera widoczny tekst i je spełnia.

Komu pomaga etykieta w nazwie?

Przede wszystkim osobom korzystającym z rozpoznawania mowy: mówią „kliknij Dodaj do koszyka”, a to działa tylko wtedy, gdy dostępna nazwa zawiera te słowa. Użytkownicy czytników ekranu też słyszą nazwę zgodną z tym, co widzą osoby widzące.