Przejdź do treści

Teksty alternatywne: jak pisać opisy obrazów, żeby miały sens

Czego wymaga kryterium

Kryterium 1.1.1 wymaga, aby każdy element nietekstowy niosący informację miał alternatywę tekstową o tym samym znaczeniu. W praktyce chodzi o atrybut alt przy obrazach, etykiety przy ikonach oraz opisy przy wykresach i infografikach.

Kogo to dotyczy

Osoba niewidoma słyszy zamiast obrazu jego opis. Gdy opisu nie ma, czytnik ekranu odczytuje nazwę pliku, na przykład „i m g underscore 4 7 2 kropka j p g”. Przy dwudziestu zdjęciach produktów strona zamienia się w ciąg bełkotu. To samo dotyczy osób z bardzo wolnym łączem, u których obrazy się nie wczytują, oraz wyszukiwarek.

Jak sprawdzić u siebie w pięć minut

Wyłącz wyświetlanie obrazów w przeglądarce albo najedź na obraz narzędziami deweloperskimi i sprawdź atrybut alt. Szybszy sposób: jeżeli usuniesz z podstrony wszystkie obrazy, a treść nadal przekazuje to samo, opisy są poprawne. Jeżeli coś zniknęło, brakuje alternatywy.

Jak pisać dobre opisy

Opis ma oddawać funkcję obrazu w danym miejscu, a nie wyliczać, co widać. Ten sam obraz w dwóch miejscach może mieć dwa różne opisy.

<!-- zdjęcie produktu w sklepie -->
<img src="kurtka.jpg" alt="Czerwona kurtka przeciwdeszczowa z kapturem, widok z przodu">

<!-- to samo zdjęcie jako link do karty produktu -->
<a href="/kurtka"><img src="kurtka.jpg" alt="Zobacz kurtkę przeciwdeszczową Alpina"></a>

<!-- obraz wyłącznie ozdobny -->
<img src="fala.svg" alt="" aria-hidden="true">

Pięć najczęstszych błędów

Ile to kosztuje

Przy sklepie z tysiącem produktów uzupełnienie opisów to zwykle kilka dni pracy osoby prowadzącej katalog. Dlatego powoływanie się przy tym kryterium na nieproporcjonalne obciążenie prawie nigdy się nie broni: koszt jest niski, a korzyść duża i oczywista.

Wróć do listy materiałów