Dobre praktyki

Przyciski bez dostępnej nazwy: najczęstszy błąd wykrywany przez skanery

Przyciski z ikonami bez dostępnej nazwy (lupa, koszyk, krzyżyk, menu hamburgerowe) to najczęściej wykrywany problem w audytach dostępności. Dla użytkownika czytnika ekranu brzmi to jak „przycisk” bez kontekstu. Poznaj cztery techniki ich naprawy.

Liczby, metodologia i warunki wykorzystania: zobacz dane do cytowania →

La réponse courte

Krótka odpowiedź: przycisk z ikoną SVG lub obrazem bez atrybutu aria-label, aria-labelledby lub widocznego tekstu pozostaje niewidoczny dla czytnika ekranu. Użytkownik słyszy jedynie „przycisk”. Aby to poprawić: dodaj aria-label dla krótkiej etykiety, użyj widocznego tekstu, jeśli pozwala na to przestrzeń, lub aria-labelledby, aby powiązać z istniejącym tekstem. Sprawdź za pomocą F12: zakładka Accessibility powinna wyświetlać nazwę przycisku.

Dlaczego ta wada jest krytyczna

Przyciski bez dostępnej nazwy należą do najczęstszych naruszeń WCAG w Stanach Zjednoczonych, zgodnie z publicznymi danymi firm zajmujących się zgodnością. Reguła W3C („Image button has non-empty accessible name”) ma zastosowanie wszędzie: lupka wyszukiwania, koszyk zakupowy, krzyżyk zamykający, strzałka karuzeli, ikona mediów społecznościowych – wszystkie wymagają słyszalnej nazwy.

Artykuł opiera się na badaniu Inclaria 2026: wśród 55 analizowanych francuskich witryn e-commerce, 94,5% miało przynajmniej jedną krytyczną lub poważną niezgodność. Źle nazwane przyciski ikonowe zajmują pierwsze miejsce wśród wykrytych przypadków, często na kilku stronach tej samej witryny.

Co słyszy użytkownik czytnika ekranu

Postawcie się na miejscu osoby poruszającej się po stronie bez widoku ekranu. Gdy natrafi na przycisk lupy bez dostępnej nazwy, jej czytnik ekranu ogłasza po prostu „Przycisk” – i milknie. Brak kontekstu, brak wskazówki co do działania. Musi wyjść z trybu czytnika, otworzyć inspektor przeglądarki lub sięgnąć po dokumentację zewnętrzną, by zrozumieć, o co chodzi.

Ten sam scenariusz dotyczy koszyka zakupów przedstawionego jedynie jako ikona SVG, krzyżyka zamykającego modal czy strzałek do nawigacji w karuzeli. Każdy niemy przycisk tworzy strefę niepewności dla użytkownika. Na stronie z 15 czy 20 źle opisanymi przyciskami-ikonami tarcie narasta szybko: niektórzy użytkownicy rezygnują.

Cztery techniki nazywania przycisku

1. Tekst widoczny z ukrytą widocznością (sr-only)

Dodaj element span klasy sr-only zawierający etykietę. Niewidoczny na ekranie, słyszalny dla czytników ekranu.

Kod

Przycisk zawierający ikonę SVG lupy oraz element span klasy „sr-only” z tekstem „Szukaj”.

Zaleta: tekst znajduje się również w DOM, więc technicznie dostępny dla wyszukiwarek. Wada: wymaga zdefiniowanej klasy CSS sr-only w arkuszu stylów.

2. aria-label

Atrybut bezpośrednio na przycisku: aria-label=„Szukaj”. Krótki, łatwy i nie wpływa na wizualny DOM.

Zaleta: minimalistyczny, szybki do dodania. Wada: niewidoczny w tekście widocznym, więc niedostępny dla kopiowania-wklejania i SEO tekstowego.

3. aria-labelledby

Łączy przycisk z innym elementem tekstowym w DOM za pomocą identyfikatora: aria-labelledby=„search-label”. Idealne, gdy odpowiedni tekst już istnieje na stronie.

Zaleta: odnosi się do rzeczywistej treści, możliwej do śledzenia. Wada: wymaga istnienia tekstu źródłowego z unikalnym identyfikatorem id.

4. Atrybut alt na input type=image

Jeśli używasz input typu image ze źródłem „search.png” i tekstem alternatywnym „Szukaj”, atrybut alt służy bezpośrednio jako dostępna nazwa.

Zaleta: semantyka natywna. Wada: rozwiązanie przestarzałe w nowoczesnym HTML, rzadko rekomendowane.

Kiedy używać każdej z nich? Macierz decyzyjna

Pułapki często spotykane

Atrybut title nie wystarcza

Wielu programistów błędnie uważa, że atrybut title=„Szukaj” na przycisku wystarczy, aby go nazwać. W rzeczywistości title jest atrybutem wskazówki przy najechaniu (tooltip), a nie dostępną nazwą. Czytniki ekranu go ignorują, z wyjątkiem bardzo ograniczonych przypadków. Nie polegajcie na nim.

aria-label w obcym języku

Jeśli wasza treść łączy różne języki, zwróćcie uwagę: aria-label zawsze używa języka strony. aria-label=„Search” na francuskiej stronie będzie odczytane przez czytnik ekranu po francusku. Lepiej użyjcie widocznego tekstu lub upewnijcie się, że aria-label jest zgodne z językiem lokalnym.

Pułapka 2.5.3: „Label in Name”

Subtelna pułapka: jeśli przycisk ma widoczny tekst (np. „OK”), jego aria-label musi zaczynać się od tego samego tekstu lub go zawierać. Przycisk wyświetlający „OK” z aria-label=„Zatwierdź” tworzy niespójność, której użytkownicy poleceń głosowych („kliknij OK”) nie mogą aktywować. Dopasujcie nazwę dostępną do widocznego tekstu.

SVG bez odpowiedniego role

Sam SVG to tylko obraz. Zawsze umieszczajcie go w elemencie semantycznym (button, a) lub dodajcie role=„button”. Bez tego czytnik ekranu może go zignorować lub ogłosić jako obraz.

Jak sprawdzić w dwie minuty

Otwórz swoją stronę w dowolnej nowoczesnej przeglądarce (Chrome, Firefox, Safari).

• Naciśnij F12 (lub kliknij prawym przyciskiem myszy, a następnie Zbadaj).
• Zlokalizuj przycisk z ikoną w kodzie HTML.
• Otwórz zakładkę Accessibility (Chrome, Edge, Firefox).
• Sprawdź pole Accessible Name: powinno wyświetlać jasny tekst (np. „Szukaj”, „Koszyk”). Jeśli jest puste lub wyświetla „button”, brakuje nazwy.

Alternatywnie: poruszaj się klawiaturą (Tab) do przycisku, a następnie przetestuj za pomocą darmowego czytnika ekranu.

Test klawiatury i czytnika ekranu

W systemie Windows NVDA (darmowy, open source) jest niezawodny. Na Macu VoiceOver jest preinstalowany (Cmd+F5). Przeglądaj swoją stronę: każdy przycisk z ikoną powinien wyraźnie podawać swoją nazwę. Jeśli słyszysz tylko „przycisk”, popraw to.

Przykłady praktyczne: lupa, koszyk, krzyżyk, strzałki

Loupe de recherche

Przycisk z atrybutem aria-label=„Szukaj” zawierający ikonę SVG to standardowe podejście. Krótko i jasno. Jeśli stosujesz ukryty tekst: użyj przycisku zawierającego ikonę SVG oraz element span z klasą „sr-only” i tekstem „Szukaj”.

Panier d'achat

Preferujcie aria-label=„Koszyk” lub aria-label=„Zobacz koszyk (2 produkty)”. Liczba produktów może wzbogacić kontekst bez przeciążania komunikatu.

Ikona zamknięcia

Przycisk z atrybutem aria-label=„Zamknij” zawierający ikonę SVG w kształcie krzyżyka to klasyczne rozwiązanie. Prosty tekst, bez żargonu.

Strzałki karuzeli

Przyciski z atrybutem aria-label=„Następny element” oraz aria-label=„Poprzedni element” prowadzą użytkownika. Unikaj ogólnych sformułowań typu „Dalej” czy „Wstecz” samodzielnie; doprecyzuj: „Poprzedni slajd karuzeli”.

Ikony społecznościowe

Link z atrybutem aria-label=„Śledź nas na X (Twitter)” lub przycisk z aria-label=„Udostępnij na LinkedIn” jednoznacznie wskazuje docelową sieć społecznościową.

Integracja w ramach działań na rzecz zgodności

Przyciski bez dostępnej nazwy to najczęściej wykrywany błąd przez automatyczne skanery. Jeśli przeprowadzasz audyt dostępności na swojej stronie, to naruszenie pojawi się niemal na pewno, często z dziesiątkami wystąpień.

Dobra wiadomość: jest łatwe i szybkie do naprawienia. Gdy już zrozumiesz wzorzec, możesz przejrzeć swoją bazę kodu, poprawić przyciski-ikony w ciągu kilku godzin i zmierzyć wpływ: znacząca część Twojego wyniku dostępności ulegnie natychmiastowej poprawie.

Skuteczna strategia: uruchom automatyczny skaner (Inclaria, aXe, WAVE), posortuj wyniki według wagi, a następnie zacznij od przycisków bez dostępnej nazwy. To samo w sobie eliminuje znaczną część krytycznych niezgodności na wielu stronach. Następnie przejdź do testów manualnych i błędów strukturalnych (nawigacja klawiaturą, kolejność tabulacji, kontrasty).