WCAG 4.1.2 Nazwa, rola, wartość (A) · aktualizacja
Przycisk bez nazwy: ikony, które czytnik ekranu odczytuje jako „przycisk"
Przycisk ma nazwę, jeśli czytnik ekranu może powiedzieć, co ten przycisk robi. Przycisk z samą ikoną (menu, zamknij, dodaj do ulubionych) nie ma nazwy, dopóki nie dodasz jej w kodzie, na przykład aria-label="Zamknij okno" albo ukryty tekst.
Jak często się zdarza
Według raportu WebAIM Million 2026 puste przyciski były na 30,6% stron głównych. To zwykle ikony: hamburger menu, krzyżyk w oknie, strzałki karuzeli.
Komu to przeszkadza
Osoby niewidome słyszą „przycisk, przycisk, przycisk" i muszą klikać na ślepo. Osoby sterujące głosem nie mogą powiedzieć „kliknij Zamknij", bo przycisk nie ma żadnej nazwy.
Skąd się bierze
- Przycisk menu z samą ikoną trzech kresek.
- Krzyżyk zamykający okno z promocją albo baner cookies.
- Strzałki karuzeli i kropki paginacji.
- Przyciski zmiany ilości w koszyku („+" i „-") bez opisu, której pozycji dotyczą.
Poprawka w kodzie
Przed
<button class="zamknij"><svg>...</svg></button>Po
<button class="zamknij" aria-label="Zamknij okno z promocją">
<svg aria-hidden="true" focusable="false">...</svg>
</button>Ikonę ukryj przed czytnikiem (aria-hidden), żeby nie dublowała nazwy. W koszyku dopisz produkt: „Zwiększ ilość: czerwony kubek 300 ml".
Jak sprawdzić to samodzielnie
- Przejdź po stronie klawiszem Tab z włączonym czytnikiem ekranu.
- Przy każdym przycisku posłuchaj, czy wiesz, co się stanie po naciśnięciu Enter.
- Szczególnie sprawdź okna, menu mobilne i karuzele, bo tam ikon jest najwięcej.
Co wykryje skaner, a czego nie
Skaner wykryje
Skaner znajdzie każdy przycisk bez nazwy dostępnej, także zbudowany z elementu div z rolą button.
Wymaga sprawdzenia przez człowieka
Automat nie oceni, czy nazwa jest trafna. Przycisk „Kliknij" albo „Przycisk" formalnie ma nazwę, a nadal nic nie mówi. Nie sprawdzi też, czy nazwa zgadza się z widocznym tekstem (kryterium 2.5.3).
Najczęstsze pytania
Czym różni się aria-label od title na przycisku?
aria-label daje przyciskowi nazwę dla technologii wspomagających. Atrybut title pokazuje dymek po najechaniu myszą, ale nie jest wiarygodnym źródłem nazwy i nie działa na ekranach dotykowych. Do nazwy używaj aria-label albo ukrytego tekstu.
Czy przycisk może mieć tylko ikonę?
Może, jeśli ma nazwę w kodzie. Dla popularnych ikon (lupa, koszyk) to często wystarcza. Dla mniej oczywistych warto dodać widoczny podpis, bo pomaga to wszystkim użytkownikom, nie tylko tym z czytnikiem.
Źródła
- [1] Understanding Success Criterion 4.1.2W3C Web Accessibility Initiative (WAI)
- [2] Web Content Accessibility Guidelines (WCAG) 2.2W3C (World Wide Web Consortium)
- [3] The WebAIM Million: raport 2026 o dostępności miliona stron głównychWebAIM, Institute for Disability Research, Policy, and Practice, Utah State University