Nazwa, rola, wartość

Czego wymaga kryterium

Każdy interaktywny element na stronie — przyciski, łącza, pola formularza, zakładki, suwaki, niestandardowe widżety — musi udostępniać technologiom wspomagającym trzy rodzaje informacji:

• Nazwa — jak nazywa się ten element? („Wyślij”, „Zamknij okno dialogowe”, „Głośność”)
• Rola — jaki to rodzaj elementu? (przycisk, łącze, pole wyboru, zakładka, suwak)
• Wartość / stan — dla elementów, które ją posiadają: czy jest wciśnięty, rozwinięty, zaznaczony, wybrany? Jaka jest bieżąca wartość?

Udostępnienie musi być programowe — zdefiniowane w DOM, a nie namalowane przez CSS. Czytniki ekranu, monitory brajlowskie, oprogramowanie do sterowania głosowego oraz skanery z przełącznikami odczytują drzewo dostępności, a nie piksele.

Jak spełnić wymaganie

• Należy używać natywnego elementu HTML wszędzie tam, gdzie taki istnieje. <button> dostarcza odpowiednią rolę, fokus, obsługę klawiatury i dostępną nazwę z treści tekstowej — bez dodatkowego nakładu pracy.
• Dla przycisków z samą ikoną należy dodać aria-label (lub wizualnie ukryty tekst). <button aria-label="Zamknij">×</button>.
• Dla pól formularza należy powiązać <label for> z id pola. Można też opakować pole w <label>. Tekst zastępczy (placeholder) nie jest etykietą.
• Jeśli zachodzi konieczność zbudowania niestandardowego widżetu z <div> i <span>, należy dodać role="…", zarządzać tabindex, obsłużyć klawisze Enter i Space, a stan odzwierciedlać za pomocą aria-pressed, aria-expanded, aria-checked, aria-selected, aria-valuenow.
• Wyrenderowaną stronę należy przejrzeć przez inspektora drzewa dostępności w przeglądarce (Chrome DevTools → Elements → Accessibility) i odczytać każdy element: każdy powinien być ogłaszany jako nazwa + rola + stan.

Typowe błędy

• <div onclick="…"> stylizowany jako przycisk — brak roli, obsługi klawiatury i nazwy. Czytniki ekranu go pomijają. Sterowanie głosowe nie może powiedzieć „kliknij Zapisz”.
• <div role="button"> bez tabindex="0" i bez obsługi Enter/Space — wygląda na dostępny, ale nim nie jest.
• Przyciski z samą ikoną (<button><svg /></button>) bez aria-label, aria-labelledby ani wizualnie ukrytego tekstu. Ogłaszane są jedynie jako „przycisk”.
• Niestandardowe listy rozwijane zbudowane z <div> i JavaScript, w których brakuje role="combobox", aria-expanded, aria-controls oraz ról listbox/option dla elementów wewnętrznych.
• Przyciski przełączające (wyciszenie, ulubione, obserwowanie), które zmieniają stan wizualnie, ale nigdy nie aktualizują aria-pressed. Użytkownicy widzący dostrzegają zmianę; użytkownicy czytników ekranu nie słyszą różnicy.
• Pola formularza z wizualną etykietą obok, lecz bez powiązania for/id lub otaczającego elementu <label>.
• Niestandardowe pola wyboru narysowane za pomocą <svg> z ukrytym natywnym elementem input, w których :checked nie jest odzwierciedlany w widocznym interfejsie — stany czytnika ekranu i wizualny rozchodzą się.

Dlaczego to ważne

To najczęściej cytowane kryterium sukcesu w specyfikacji. Niemal każda skarga w stylu „ta strona jest bezużyteczna z czytnikiem ekranu” sprowadza się do błędu wynikającego z 4.1.2 — zazwyczaj chodzi o <div> udający przycisk lub przycisk z ikoną bez nazwy. Tu ujawnia się też koszt budowania niestandardowych widżetów: każdy natywny element HTML spełnia 4.1.2 automatycznie; każdy ręcznie zbudowany widżet <div> musi „zasłużyć” na zgodność linijka po linijce. Najszybszym audytem 4.1.2 jest przejście przez stronę klawiszem Tab przy włączonym czytniku ekranu i słuchanie — wszystko, co jest ogłaszane jako „puste” albo tylko „przycisk”, jest znaleziskiem.