Kryterium 4.1.2 – Nazwa, rola, wartość (Poziom A) dotyczy tego, aby wszystkie interaktywne elementy na stronie (np. przyciski, pola formularzy, suwaki) były prawidłowo rozpoznawane przez technologie wspomagające, takie jak czytniki ekranu.
W tym artykule pokażemy, jak sprawdzić zgodność strony z tym wymaganiem – bez potrzeby znajomości HTML, JavaScript czy kodu źródłowego.
Co oznacza „nazwa, rola, wartość”?
Każdy interaktywny element na stronie ma swoją:
-
Nazwę – czyli opis, jak czytnik ekranu ma go przedstawić (np. „Szukaj”, „Wyślij”, „Zgłoś”),
-
Rolę – czyli funkcję (np. „przycisk”, „pole tekstowe”, „lista rozwijana”),
-
Wartość – jeśli dotyczy (np. wpisany tekst, wybrana opcja).
Technologie asystujące odczytują te informacje i umożliwiają użytkownikowi zrozumienie i obsługę strony.
Jak sprawdzić zgodność z kryterium 4.1.2 bez wiedzy technicznej?
1. Przetestuj elementy interaktywne czytnikiem ekranu
Co zrobić?
Zainstaluj czytnik ekranu, np. NVDA (Windows) lub użyj funkcji VoiceOver (macOS).
Na co zwrócić uwagę?
-
Czy czytnik mówi, czym jest dany element (np. „przycisk: Szukaj”)?
-
Czy możesz odczytać etykiety pól formularza?
-
Czy po zmianie wartości (np. suwaka) czytnik informuje o nowej wartości?
Przykład błędu:
Przycisk ma tylko ikonę (np. lupę), ale czytnik ekranu mówi jedynie „przycisk”, bez nazwy – użytkownik nie wie, do czego służy.
2. Przegląd formularzy i przycisków
Co zrobić?
Przejdź przez formularze i elementy interaktywne, poruszając się klawiszem Tab.
Na co zwrócić uwagę?
-
Czy każdy element ma widoczną i zrozumiałą etykietę?
-
Czy wiesz, co zrobi dany przycisk przed jego naciśnięciem?
-
Czy zmiany w elementach dynamicznych (np. menu, zakładki) są komunikowane użytkownikowi?
Wskazówka:
Jeśli coś zmienia się po kliknięciu, ale nie ma komunikatu, może brakować aktualizacji wartości.
Dlaczego to ważne?
Dla osób niewidomych, słabowidzących lub korzystających z technologii wspomagających brak informacji o nazwie, roli lub wartości oznacza, że nie wiedzą, co klikają lub wpisują.
To może uniemożliwić korzystanie z podstawowych funkcji strony.
Dobre praktyki
-
Upewnij się, że każdy przycisk, link i pole ma czytelną etykietę.
-
Unikaj przycisków z samymi ikonami – dodaj opis alternatywny (np.
aria-label). -
Stosuj elementy HTML zgodnie z ich przeznaczeniem (np.
<button>,<label>,<input>). -
Zapewnij, że wartości dynamiczne (np. w suwakach, rozwijanych listach) są aktualizowane i komunikowane.
Podsumowanie
Kryterium 4.1.2 – Nazwa, rola, wartość zapewnia, że wszystkie interaktywne elementy są czytelne i zrozumiałe dla użytkowników korzystających z czytników ekranu.
Nie musisz znać kodu – wystarczy, że sprawdzisz, czy przyciski i pola są dobrze opisane i działają przewidywalnie.
Dzięki temu Twoja strona staje się bardziej dostępna – i bardziej przyjazna dla wszystkich.