WCAG 2.1 – Kryterium 2.5.3 – etykieta w nazwie (Poziom A)

Dzisiaj przybliżymy Wam kryterium WCAG 2.5.3 etykieta w nazwie na poziomie pojedynczego A.

Jak zwykle chcemy wytłumaczyć Wam to jak najlepiej i jak najprościej. Spróbujmy!

To, że przyciski mają swoje etykiety w większości już wiemy. Często pomagają one osobom korzystającym z czytników ekranu zrozumieć kontekst i cel danego elementu. W jaki sposób? Ich cel może być ukryty wizualnie, a technologia asystująca przetwarza dodatkowy opis, jeśli twórca danego serwisu się na to zdecyduje.

O czym jednak musimy pamiętać?

Najważniejszym jest, by etykieta, której część rozszerzamy, rozpoczynała się dokładnie od tego samego opisu, który jesteśmy w stanie zobaczyć.

Przykład WCAG 2.5.3 etykieta w nazwie?

Na stronie widnieje przycisk “Więcej informacji” otwierający okno modalne z wyjaśnieniem oferty. Etykieta takiego elementu może wyglądać tak: “Więcej informacji o ofercie dostępnościowej Kinaole”.

Jakie błędy się zdarzają?

Twórcy często chcąc skrócić i pozornie ulepszyć opis, sprawiają, że strona staje się niedostępna dla Użytkowników wydających polecenia głosowe. Etykieta “Oferta dostępnościowa Kinaole” umieszczona w atrybucie aria-label nada świetny kontekst przyciskowi, jednakże sprawi, że polecenie głosowe nie zadziała. Osoby, które widzą i jednocześnie korzystają z poleceń głosowych, będą próbowały aktywować przycisk z etykietą “Więcej informacji”. Nasze urządzenie jednakże jej nie rozpozna…bo obecnie to “Oferta dostępnościowa Kinaole”.

Zasada jest więc prosta: najpierw umieszczamy w etykiecie to, co widzimy, później dodajemy kontekst. 🙂

Co jeszcze można ulepszyć kierując się tym kryterium?

Można zadbać o powiązanie etykiet w przypadku wszelkiego typu grup. Mowa tutaj o kilku chceckboxach, radiobuttonach czy na przykład gwiazdkach przy opiniach. Zadbajmy, żeby taka grupa miała swoją wspólną etykietę. Można do tego wykorzystać wspomniany już przy kryterium fieldset z legendą.