Zasada 4: Solidność 4.1 Kompatybilność

4.1.2 Nazwa, rola, wartość

WCAG 4.1.2 Name, Role, Value

W skrócie

Każdy element interfejsu (przycisk, pole, przełącznik, zakładka, menu) ma w kodzie nazwę, rolę i aktualny stan, które mogą odczytać technologie wspomagające.

Poziom
A Podstawowe minimum – bez tego część osób w ogóle nie skorzysta ze strony.
Czy to obowiązkowe?
Wymagane prawem
Kto w zespole odpowiada
Programowanie
Jak to wykryć
Częściowo automatyczne

Wyjaśnienie prostym językiem: ARIA, Czytnik ekranu, Etykieta pola formularza, Nazwa dostępna, Semantyczny HTML

Komu i dlaczego to pomaga

Czytnik ekranu musi powiedzieć: „Menu, przycisk, zwinięty” – a nie „klikalne”. Własne komponenty bez ARIA są dla osób niewidomych nieme.

  • Osoby niewidome
  • Osoby z niepełnosprawnością ruchową

Jak zrobić to dobrze

  • Zawsze najpierw natywny HTML (<button>, <input type="checkbox">, <details>).
  • Dla własnych komponentów stosuj wzorce WAI-ARIA APG: role, aria-expanded, aria-selected, aria-checked.
  • Nadawaj title elementom <iframe>.

Najczęstsze błędy

  • Własne przełączniki, zakładki i akordeony z <div> bez ról i stanów ARIA.
  • Przycisk rozwijający menu bez aria-expanded.
  • Pola formularza bez dostępnej nazwy.
  • iframe bez atrybutu title.

Przykład w kodzie

Źle
<div class="menu-toggle" onclick="toggle()">☰</div>
Dobrze
<button type="button" aria-expanded="false" aria-controls="menu">
  Menu
</button>

Jak to sprawdzić

  1. Sprawdź w DevTools (zakładka Accessibility) nazwę i rolę elementów interaktywnych.
  2. Przejdź po komponentach czytnikiem ekranu – czy słychać nazwę, typ i stan (zaznaczony, rozwinięty)?

Częściowo automatyczne. Narzędzia wykryją część problemów (np. brak atrybutu), ale ocena jakości wymaga człowieka.

Czy to obowiązkowe?

Wymagane prawem

Kryterium poziomu A z WCAG 2.1 – obowiązkowe dla podmiotów publicznych (ustawa z 4 kwietnia 2019 r. o dostępności cyfrowej stron internetowych i aplikacji mobilnych) oraz dla firm objętych European Accessibility Act (ustawa o zapewnianiu spełniania wymagań dostępności przez niektóre produkty i usługi). Brak zgodności trzeba wykazać w deklaracji dostępności.

Naucz się tego w praktyce

Zobacz wszystkie kursy dostępności

Powiązane kryteria

1.3.1

Informacje i relacje

Poziom A Wymagane prawem

Struktura, którą widać na ekranie (nagłówki, listy, tabele, pola formularza z etykietami, grupy), musi być też zapisana w kodzie – tak, żeby czytnik ekranu mógł ją odczytać.

2.1.1

Klawiatura

Poziom A Wymagane prawem

Wszystko, co da się zrobić myszą, musi dać się zrobić samą klawiaturą: menu, przyciski, formularze, suwaki, okna dialogowe, odtwarzacze.

2.5.3

Etykieta w nazwie

Poziom A Wymagane prawem

Dostępna nazwa elementu (odczytywana przez czytnik, używana przy sterowaniu głosem) zawiera tekst, który widać na etykiecie – najlepiej na początku.

4.1.3

Komunikaty o stanie

Poziom AA Wymagane prawem

Komunikaty o stanie (np. „Dodano do koszyka”, „Znaleziono 12 wyników”, „Formularz wysłany”), które pojawiają się bez przenoszenia fokusu, są ogłaszane przez czytnik ekranu.

Ostatnia aktualizacja: .
Źródło: Understanding SC 4.1.2: Name, Role, Value – oficjalne objaśnienie W3C (po angielsku).