Brak tekstu alternatywnego
Silktide znajduje obrazy na Twoich stronach, które w ogóle nie mają tekstu alternatywnego. Tekst alternatywny to pisemny opis odczytywany na głos zamiast obrazu, dlatego obrazy bez niego są pozbawione znaczenia dla osób, które ich nie widzą.
<!-- Problem: brak atrybutu alt -->
<img src="apple.png">
<!-- Naprawiono: opisowy tekst alternatywny -->
<img src="apple.png" alt="Czerwone jabłko">
<!-- Również poprawne: wyraźnie oznaczone jako dekoracyjne -->
<img src="decorative-swirl.png" alt="">
Dlaczego to ważne
nie ma czego ogłosić w przypadku obrazu bez — w najlepszym razie odczyta nazwę pliku, która rzadko jest pomocna i często wprowadza w błąd. Osoby niewidome lub słabowidzące tracą informacje przekazywane przez obraz, a jeśli obraz jest wykresem, przyciskiem lub łączem, mogą w ogóle nie być w stanie korzystać ze strony.
Tekst alternatywny pojawia się również, gdy obrazy nie mogą się załadować, i pomaga wyszukiwarkom zrozumieć Twoje obrazy, więc jego dodanie przynosi korzyści każdemu odwiedzającemu.
Jak to naprawić
- Dodaj tekst alternatywny do każdego obrazu w swoim — większość z nich ma pole do jego wprowadzenia wszędzie tam, gdzie dodajesz obraz. W kodzie użyj atrybutu
alt, jak pokazano powyżej. - Opisz informacje lub cel obrazu, a nie jego wygląd. W przypadku obrazu działającego jako łącze lub przycisk opisz, dokąd prowadzi lub co robi.
- Jeśli obraz jest wyłącznie , ustaw pusty atrybut
alt="", aby czytniki ekranu go pomijały. Nie wymyślaj tekstu zastępczego — usłyszenie „dekoracyjna grafika z zawijasem” jest gorsze niż nieusłyszenie niczego.
WebAIM publikuje szczegółowy przewodnik po tworzeniu tekstów alternatywnych.
Jak Silktide to testuje
- Znajdź każdy obraz na każdej stronie.
- Pomiń obrazy, które nie wymagają tekstu alternatywnego: obrazy bez źródła, obrazy o wielkości 1 piksela lub mniejsze (zwykle piksele śledzące) oraz obrazy ukryte przed czytnikami ekranu.
- Pomiń obrazy oznaczone jako dekoracyjne atrybutem
role="presentation", ponieważ są one celowo ukryte przed . - Zgłoś każdy pozostały obraz, który w ogóle nie ma atrybutu
alt.
Obraz z pustym atrybutem alt="" przechodzi tę kontrolę, ale jest objęty kontrolą Obrazy dekoracyjne, która prosi o potwierdzenie, że obraz jest rzeczywiście dekoracyjny. Istniejący, lecz niepomocny tekst alternatywny jest objęty kontrolą Słaby tekst alternatywny.
Rozwiązywanie problemów
Obraz jest dekoracyjny, dlaczego więc został oznaczony?
Obraz jest traktowany jako dekoracyjny tylko wtedy, gdy jest tak oznaczony w kodzie za pomocą pustego atrybutu alt="" lub role="presentation". Obraz bez atrybutu alt jest niejednoznaczny — technologie wspomagające nie potrafią odróżnić „dekoracyjnego” od „zapomnianego” — dlatego nie przechodzi tej kontroli. Dodaj pusty atrybut, aby wyraźnie określić zamiar.
Obraz pochodzi z usługi zewnętrznej
Obrazy generowane przez osadzone usługi, takie jak mapy, mogą nie być przez Ciebie edytowalne. Ustawienia Twojej witryny mogą wykluczyć treści zewnętrzne z tej kontroli lub możesz pojedyncze ustalenia, których nie możesz zmienić.