Tekst alternatywny przycisku obrazkowego
Silktide znajduje w formularzach przyciski obrazkowe, które nie mają . Przycisk obrazkowy bez tekstowej alternatywy nie daje osobom, które go nie widzą, możliwości dowiedzenia się, co się stanie po jego naciśnięciu.
<!-- Problem: brak atrybutu alt -->
<input type="image" src="button.png">
<!-- Problem: pusty alt -->
<input type="image" src="button.png" alt="">
<!-- Poprawione: tekst alternatywny określa działanie -->
<input type="image" src="button.png" alt="Wyślij wiadomość">
Dlaczego to ważne
Przycisk obrazkowy (<input type="image">) używa obrazu zamiast etykiety tekstowej, więc jego atrybut alt jest jedyną nazwą, którą może odczytać . Bez niego przycisk jest odczytywany po prostu jako „przycisk” lub na podstawie nazwy pliku. Formularz, którego przycisku wysyłania nie można zidentyfikować, jest formularzem, którego niektórzy odwiedzający nie mogą pewnie wypełnić — co stanowi bezpośrednią barierę dla zapytań, rejestracji i zakupów.
W przeciwieństwie do zwykłych obrazów przycisk nigdy nie może być dekoracyjny: zawsze coś robi, więc zawsze potrzebuje nazwy.
Jak to naprawić
- Dodaj atrybut
alt, który opisuje działanie wykonywane przez przycisk, na przykład „Szukaj” lub „Wyślij wiadomość”, jak w powyższym przykładzie. - Nie pozostawiaj atrybutu pustego — pusty
alt=""ukrywa nazwę przycisku, nie ukrywając samego przycisku. - Możesz też zastąpić przycisk obrazkowy elementem
<button>zawierającym rzeczywisty tekst, który jest prostszy do stylowania i domyślnie dostępny.
Jak Silktide to testuje
- Znajduje każdy przycisk obrazkowy (
<input type="image">) na każdej stronie. - Pomija przyciski ukryte przed czytnikami ekranu.
- Zgłasza każdy przycisk, którego atrybut
altnie istnieje lub jest pusty.
Przyciski, których tekst alternatywny istnieje, ale wydaje się nieprzydatny, obejmuje oddzielna kontrola tekstu alternatywnego przycisku wysyłania.