Etykietowanie za pomocą atrybutu title

Silktide sprawdza przyciski i linki na Twoich stronach pod kątem kontrolek, które polegają na atrybucie title, aby wyjaśnić swoje działanie. Przeglądarki wyświetlają title tylko jako opóźnioną podpowiedź po najechaniu wskaźnikiem myszy na element, dlatego większość osób nigdy go nie widzi.

<!-- Problem: podpowiedź jest jedyną etykietą -->
<button title="Zamknij"><svg>…</svg></button>

<!-- Rozwiązanie: nadaj kontrolce prawdziwą nazwę dostępną -->
<button aria-label="Zamknij"><svg>…</svg></button>

Dlaczego to jest ważne

Podpowiedź title pojawia się tylko dla użytkowników myszy i dopiero po chwili. Użytkownicy klawiatury, ekranów dotykowych i urządzeń mobilnych oraz większość użytkowników nigdy jej nie otrzymuje, więc kontrolka opisana wyłącznie przez title jest tajemniczym przyciskiem dla dużej części Twoich odwiedzających. Czytniki ekranu również obsługują title niespójnie — niektóre go odczytują, inne ignorują — co czyni go niewiarygodnym nawet dla użytkowników, którym teoretycznie ma służyć.

Gdy kontrolka ma zarówno title, jak i inną , problemem jest spójność: użytkownik myszy przez chwilę widzi jeden opis, podczas gdy użytkownik technologii asystującej słyszy inny, a w miarę utrzymywania strony różnice między nimi się pogłębiają.

Jak to naprawić

Nadaj kontrolce właściwą etykietę: widoczny tekst, jeśli to możliwe, albo aria-label (lub aria-labelledby wskazujący istniejący tekst) dla kontrolek zawierających wyłącznie ikonę.
Jeśli kontrolka ma zarówno title, jak i aria-label, które się różnią, wybierz bardziej użyteczne sformułowanie i używaj go wszędzie. Zwykle najczystszym rozwiązaniem jest usunięcie title i pozostawienie aria-label jako opisu.
Zachowaj title wyłącznie dla rzeczywiście dodatkowych szczegółów. Nigdy nie może to być jedyny sposób, aby dowiedzieć się, co robi kontrolka.

Jak Silktide to testuje

Znajduje widoczne przyciski, linki i kontrolki rozwijania na każdej stronie, w tym elementy z role="button" lub role="link".
Dla każdej kontrolki z nietrywialnym atrybutem title sprawdza, czy ma inne etykietowanie: widoczny tekst, obrazu, aria-label lub aria-labelledby.
Zgłasza kontrolki, których jedyną etykietą jest atrybut title.
Gdy kontrolka ma zarówno title, jak i jawne aria-label lub aria-labelledby, porównuje te wartości i zgłasza je, gdy znaczą zasadniczo różne rzeczy. Jeśli jedna wartość jedynie rozszerza drugą (title „Szukaj” i nazwa „Szukaj teraz”), nie jest to zgłaszane.

Pola formularza, takie jak <input> i <select>, nie są testowane przez tę kontrolę; jih etykietowanie obejmują etykiety kontrolek formularza.

Rozwiązywanie problemów

Atrybut title jest wymagany w elementach iframe

To prawda — title w elemencie <iframe> jest standardowym sposobem nadania mu nazwy, a ta kontrola nie testuje elementów iframe. Testuje wyłącznie interaktywne kontrolki, takie jak przyciski i linki.

Moja podpowiedź zawiera przydatne dodatkowe informacje

To uzasadnione zastosowanie, o ile kontrolka ma również prawdziwą etykietę. Ta kontrola zgłasza tylko kontrolki, w których title jest jedyną etykietą albo jest sprzeczny z nazwą dostępną.