Cel kryterium – czyli o co chodzi?
Kryterium 2.5.3 (poziom A) dotyczy zgodności etykiety widocznej na ekranie z tą, która jest przypisana programowo (np. w atrybucie aria-label). Chodzi o sytuacje, w których użytkownicy korzystają z poleceń głosowych do nawigacji – wypowiadają oni to, co widzą na ekranie. Jeśli nazwa przycisku różni się od etykiety programowej, urządzenie może jej nie rozpoznać, a użytkownik nie będzie w stanie aktywować danego elementu.
Kto skorzysta z tego rozwiązania?
To kryterium jest kluczowe dla osób korzystających z nawigacji głosowej – np. asystentów głosowych lub technologii wspomagających. Dzięki spójności między tym, co widoczne, a tym, co „słyszalne” dla urządzenia, użytkownicy mogą intuicyjnie wydawać komendy bez potrzeby domyślania się, jak „nazywa się” dany element w kodzie. To także korzyść dla wszystkich użytkowników – zachowanie spójności poprawia czytelność i przewidywalność interfejsu.
Jak poprawnie wdrożyć etykietę w nazwie?
✅ Zacznij od tekstu widocznego na ekranie
Jeśli na przycisku widnieje tekst „Więcej informacji”, dokładnie od tego powinien się zaczynać jego programowy opis (aria-label), np. aria-label="Więcej informacji o ofercie dostępnościowej Kinaole".
✅ Nie zmieniaj sensu poleceń
Nie zastępuj całkowicie widocznego tekstu opisem technicznym – użytkownik widzi coś innego, niż może wypowiedzieć.
✅ Rozszerzaj, ale nie zmieniaj
Możesz dodać kontekst do etykiety, ale nie zmieniaj jej początku.
✅ Unikaj zaskoczeń
Użytkownik powinien móc wypowiedzieć dokładnie to, co widzi, i uzyskać odpowiednią reakcję systemu.
Przykład poprawnej etykiety
👎 Błąd:
➡️ Komenda głosowa „Więcej informacji” nie zadziała.
👍 Poprawnie:
➡️ Komenda „Więcej informacji” zostanie rozpoznana, a użytkownik otrzyma dodatkowy kontekst.
Co jeszcze warto poprawić?
📌 Grupowanie elementów formularzy
Przy checkboxach, radio buttonach czy ocenach w postaci gwiazdek – warto dodać wspólną etykietę. Można to zrobić za pomocą elementu <fieldset> i <legend>.
📌 Spójność w całym serwisie
Stosuj jednolite nazewnictwo – unikaj różnych nazw dla tych samych akcji w różnych miejscach strony.
📌 Testuj z użytkownikami
Najlepiej sprawdzić działanie poleceń głosowych w praktyce – czy faktycznie można wydać komendę, patrząc na ekran, bez zgadywania.
Dlaczego to jest ważne?
Brak zgodności między widoczną nazwą a etykietą programową powoduje wykluczenie cyfrowe – osoby korzystające z poleceń głosowych nie będą w stanie aktywować elementów strony, mimo że są one widoczne. To drobny błąd, który może skutecznie zablokować dostęp do informacji lub funkcji.
Czy wiesz, że?
Spełnienie kryterium 2.5.3 – Etykieta w nazwie może znacząco poprawić komfort użytkowników – nie tylko osób z niepełnosprawnościami, ale też tych korzystających z urządzeń mobilnych czy asystentów głosowych, takich jak Siri, Google Assistant czy Alexa.
Dostępność cyfrowa to nie tylko standard – to tworzenie stron, z których każdy może korzystać.
