Kryterium 2.5.3 - etykieta w nazwie (Poziom A) - perfekcyjneStrony.pl

Cel kryterium – czyli o co chodzi?

Zapewnienie spójności pomiędzy tekstem widocznym na ekranie a nazwą programową elementu interfejsu, taką jak aria-label lub aria-labelledby. Kryterium to umożliwia skuteczne korzystanie z nawigacji głosowej – użytkownicy wypowiadają to, co widzą na stronie, a technologia powinna to rozpoznać. Jeśli etykieta w kodzie różni się od widocznej, polecenie głosowe może nie zadziałać, co powoduje barierę w dostępie do treści.

Kluczowe punkty:

Zgodność widocznej etykiety z nazwą techniczną:
Etykieta widoczna (np. na przycisku) powinna być zgodna z jej odpowiednikiem programowym. Rozszerzenie jest dozwolone, o ile nie zmienia znaczenia i nie pomija słów widocznych dla użytkownika.

Unikanie skrótów i zastępowania fraz:
Nie należy zamieniać treści widocznej na ekranie na inne określenia w aria-label. Osoby wydające polecenia głosowe będą próbowały uruchomić element na podstawie tego, co widzą, nie tego, co znajduje się w kodzie.

Ułatwienie interakcji głosowej:
Kryterium to wspiera osoby korzystające z rozpoznawania mowy, a także wpływa pozytywnie na czytelność i przewidywalność interfejsu dla wszystkich użytkowników.

Przykłady:

Poprawnie:
Na stronie widoczny jest przycisk „Zobacz szczegóły”. Programowa etykieta zawiera ten sam początek i dodaje kontekst:

html
<button aria-label="Zobacz szczegóły zamówienia">Zobacz szczegóły</button>

Błędnie:
Ten sam przycisk ma inną nazwę programową, która nie pokrywa się z widoczną etykietą:

html
<button aria-label="Informacje o zamówieniu">Zobacz szczegóły</button>

W tym przypadku użytkownik korzystający z polecenia „Zobacz szczegóły” nie uruchomi przycisku, ponieważ system nie rozpozna frazy.

Czy wiesz, że?

Zgodność między widoczną etykietą a nazwą programową jest szczególnie ważna w przypadku interfejsów sterowanych głosem. Nawet niewielka rozbieżność może skutkować brakiem możliwości wykonania działania, co prowadzi do poważnych barier w dostępności. Zachowanie tej spójności to prosty, ale istotny krok w kierunku projektowania bardziej dostępnych i przyjaznych dla wszystkich użytkowników rozwiązań.

Kryteria WCAG

Nasi klienci