Kontrolka tylko z ikoną

Silktide wyszukuje przyciski i linki oznaczone wyłącznie ikoną — taką jak krzyżyk zamykania, menu hamburgerowe lub lupa wyszukiwania — bez nazwy tekstowej dla osób, które nie mogą zobaczyć ikony.

<!-- Problem: nic nie informuje o działaniu tego przycisku -->
<button><svg>…</svg></button>

<!-- Rozwiązanie: nazwij kontrolkę -->
<button aria-label="Otwórz menu"><svg>…</svg></button>

Dlaczego to ważne

Widzący użytkownicy rozpoznają działanie przycisku z ikoną na podstawie jego kształtu i kontekstu. Użytkownicy nie mają równoważnej alternatywy: bez ich oprogramowanie anonsuje przycisk lub link bez nazwy albo odczytuje pozostałości kodu, takie jak nazwa klasy CSS ikony. Każda kontrolka zawierająca tylko ikonę bez nazwy jest kontrolką, którą ci użytkownicy muszą aktywować w ciemno lub całkowicie pominąć — a często są to najważniejsze kontrolki na stronie: menu, wyszukiwanie, zamykanie, dalej.

Jak to naprawić

Dodaj etykietę opisującą działanie kontrolki, a nie wygląd ikony: aria-label="Szukaj", a nie aria-label="Lupa".
Jeśli identyczne sformułowanie występuje już jako widoczny tekst w pobliżu, wskaż je za pomocą aria-labelledby, zamiast je powielać.
Jeśli ikona jest elementem <img>, nadanie jej znaczącego tekstu alt również nada kontrolce nazwę.
Jeśli kontrolka nie robi nic użytecznego i służy wyłącznie do dekoracji, uczyń ją nieinteraktywną zamiast ją nazywać.

Jak Silktide to testuje

Znajduje widoczne przyciski, linki i kontrolki ujawniania na każdej stronie, w tym elementy z role="button" lub role="link".
Pomija każdą kontrolkę, która ma już nazwę: widoczny tekst o długości co najmniej 2 znaków, aria-label, aria-labelledby lub atrybut title.
Sprawdza, czy pozostałe kontrolki zawierają ikonę: wbudowany SVG, obraz z pustym tekstem alt lub tekst rysowany rozpoznaną czcionką ikon.
Zgłasza kontrolki, które wyświetlają ikonę, ale nie mają nazwy.

Rozwiązywanie problemów

Kontrolka jest oznaczona w inny sposób

Silktide uwzględnia aria-label, aria-labelledby, title, widoczny tekst oraz tekst alt obrazu. Jeśli Twoja kontrolka jest nazwana za pomocą mechanizmu spoza tej listy — co zdarza się rzadko — sprawdź za pomocą czytnika ekranu, czy nazwa jest faktycznie anonsowana, i ustalenie, jeśli tak jest.

Ikona jest dekoracyjna i znajduje się obok tekstu

Kontrolki ze znaczącym widocznym tekstem nie są zgłaszane, nawet gdy obok tekstu znajduje się ikona. Jeśli kontrolka została zgłoszona, jej tekst nie osiągnął 2 znaczących znaków — tekst z pojedynczego glifu, taki jak „×”, nie jest uznawany za etykietę.