Tekst alternatywny i WCAG: jak opisywać obrazy, z przykładami

Każdy obraz na stronie wymaga decyzji: co ma usłyszeć osoba, która go nie widzi? Temu służy tekst alternatywny (alt). Czytniki ekranu odczytują go na głos, wyszukiwarki z niego korzystają, a przeglądarki pokazują go, gdy obraz się nie załaduje. WCAG nie narzuca dokładnego brzmienia, ale stawia jasny wymóg, a W3C publikuje praktyczny poradnik, jak go spełnić. Ta strona podsumowuje jedno i drugie, z przykładami ze sklepów internetowych.

To ogólna informacja, a nie porada prawna.

Czego wymaga WCAG

Wymóg to 1.1.1 Treść nietekstowa, poziom A: cała treść nietekstowa przedstawiana użytkownikowi ma alternatywę tekstową, która pełni równoważny cel. Są wyjątki. Kontrolki potrzebują nazwy opisującej ich cel; media czasowe, testy, doświadczenia zmysłowe i CAPTCHA wymagają tylko opisowej identyfikacji; a dekoracja, formatowanie lub treść niewidoczna muszą być zaimplementowane tak, by technologia wspomagająca mogła je pominąć.

Dwa kolejne kryteria są z tym ściśle związane:

• 1.4.5 Obrazy tekstu (AA): używać prawdziwego tekstu zamiast tekstu wpieczonego w obraz, chyba że użytkownik może dostosować obraz tekstu albo określony sposób prezentacji jest niezbędny; logotypy uważa się za niezbędne.
• 2.4.4 Cel łącza (w kontekście) (A): jeśli obraz jest jedyną zawartością linku, jego tekst alternatywny jest tekstem linku.

Kluczowe słowo to cel. Dokument Understanding W3C pokazuje, że ten sam obrazek globusa wymaga „International Travel” na jednej stronie, a „International Campuses” na innej. Decyduje kontekst, a nie piksele.

Drzewo decyzyjne W3C w pięciu pytaniach

Drzewo decyzyjne alt W3C zadaje pytania w tej kolejności:

1. Czy obraz zawiera tekst? Jeśli ten sam tekst jest też obok jako prawdziwy tekst albo tekst to tylko efekt wizualny, należy użyć pustego alt. Jeśli to ikona z funkcją, opisać funkcję. W przeciwnym razie alt zawiera tekst z obrazu.
2. Czy obraz jest w linku lub przycisku i bez niego cel byłby niejasny? Wtedy alt opisuje cel przejścia lub akcję.
3. Czy obraz dodaje znaczenie? Proste zdjęcie lub grafika dostaje krótki opis tego znaczenia; wykres lub diagram wymaga tych informacji także gdzie indziej na stronie; obraz powtarzający pobliski tekst dostaje pusty alt.
4. Czy jest czysto dekoracyjny? Wtedy pusty alt.
5. Nic z powyższego? Drzewo nie obejmuje każdego przypadku; zob. pełny poradnik o obrazach.

Obrazy informacyjne

Zdjęcia i ilustracje niosące informację dostają krótki opis istotnej informacji, jak ujmuje to poradnik W3C. W sklepie to głównie zdjęcia produktów.

Nasze zalecenia ponad WCAG: napisać, co ktoś by stracił – kolor, materiał, szczegół, dla którego zdjęcie istnieje. Nie zaczynać od „obraz przedstawiający”; czytniki ekranu same ogłaszają obraz. Pisać krótko, a długie specyfikacje umieścić w opisie produktu, gdzie każdy je przeczyta.

Obrazy dekoracyjne

Tekstury tła, separatory, zdjęcia nastrojowe obok nagłówka, który już wszystko mówi: użyć alt="" (pusty atrybut) albo tła w CSS. Pusty alt mówi czytnikom ekranu, aby pominęły obraz. Pominięcie atrybutu to nie to samo: bez niego czytniki ekranu mogą odczytać nazwę pliku lub adres URL.

Z „dekoracyjnym” trzeba ostrożnie. Zdjęcie lifestylowe na stronie docelowej może być dekoracyjne; to samo zdjęcie na stronie produktu, pokazujące użycie produktu, już nie.

Obrazy funkcjonalne: linki, przyciski i ikony

Gdy obraz jest jedyną zawartością linku lub przycisku, jego tekst alternatywny nazywa cel przejścia lub akcję, a nie obrazek. Poradnik W3C o obrazach funkcjonalnych podaje takie przykłady:

• logo prowadzące na stronę główną: „W3C home”, a nie „logo”;
• lupa na przycisku wyszukiwania: „Search” (Szukaj);
• ikona drukarki: „Print this page” (Drukuj tę stronę), a nie „drukarka”.

W sklepie ta sama zasada daje „Koszyk”, „Usuń z koszyka”, „Następne zdjęcie”, „Dodaj do ulubionych”. Jeśli ikona stoi obok widocznego tekstu, który już to mówi – ikona koszyka i słowo „Koszyk” – sama ikona dostaje pusty alt lub jest ukryta przed technologią wspomagającą, aby nazwa nie była odczytywana dwa razy.

Logo

• Logo jako jedyna zawartość linku do strony głównej: alt mówi, dokąd link prowadzi, np. „Przykładowy Sklep – strona główna”.
• Logo obok nazwy firmy jako tekstu w tym samym linku: pusty alt, bo tekst już ją nazywa.
• Logo partnerów lub płatności: alt nazywa markę („Visa”, „Trusted Shops”), bo logo niesie tę informację.

Logotypy są też zwolnione z wymogu kontrastu i z kryterium 1.4.5 Obrazy tekstu.

Obrazy tekstu

Banery wyprzedaży z rabatem wpisanym w obrazek to klasyczny przypadek ze sklepu. Zgodnie z 1.4.5 taki tekst powinien, jeśli to możliwe, być prawdziwym tekstem HTML nad obrazem, aby dało się go powiększyć, przekolorować i przetłumaczyć. Jeśli obraz tekstu zostaje, poradnik W3C mówi, że alternatywa tekstowa powinna zawierać te same słowa co obraz – całe „Wyprzedaż lato −30% do 31 sierpnia”, a nie „baner”.

Obrazy złożone i grupy

• Wykresy, tabele rozmiarów jako obrazy, infografiki: krótki alt mówiący, czym to jest, plus pełna informacja w tekście lub tabeli obok. W3C zaleca podanie danych źródłowych, gdy to praktyczne.
• Grupy obrazów, jak pięć gwiazdek oceny: jedna alternatywa dla całej grupy („Ocena 4 z 5”), pozostałe obrazy puste.

Co wykrywa automatyczna kontrola obrazów

Nasze kontrole używają reguł axe-core dla alternatyw tekstowych w prawdziwej przeglądarce. Znajdują:

• obrazy bez jakiejkolwiek alternatywy tekstowej (image-alt);
• przyciski graficzne bez opisu (input-image-alt);
• elementy z rolą obrazu i grafiki SVG bez alternatywy tekstowej (role-img-alt, svg-img-alt) – oceny w gwiazdkach, ikony, odznaki;
• obszary map obrazów bez opisu (area-alt) i osadzone obiekty bez opisu (object-alt);
• linki i przyciski bez dostępnej nazwy, co często oznacza ikonę bez etykiety;
• jako dobrą praktykę, teksty alternatywne powtarzające widoczny obok tekst (image-redundant-alt).

Czego żadne narzędzie automatyczne nie oceni: czy „Niebieska lniana koszula” to właściwy opis, czy obraz oznaczony jako dekoracyjny rzeczywiście taki jest i czy baner zawiera tekst. Do tego potrzebny jest człowiek. Więcej w bibliotece reguł.

Jak sprawdzić obrazy

1. Uruchomić darmowy WCAG checker na stronie produktu i stronie kategorii; wypisuje obrazy bez alternatyw wraz ze zrzutem ekranu każdego.
2. Przeczytać teksty alternatywne głównych szablonów: produktu, kategorii, strony głównej, koszyka.
3. Włączyć czytnik ekranu albo obejrzeć drzewo dostępności w narzędziach deweloperskich przeglądarki i posłuchać jednej strony produktu.
4. Najpierw poprawić szablon, potem obrazy: większość systemów sklepowych pozwala ustawić tekst alternatywny każdego zdjęcia produktu w panelu administracyjnym.

Nasze kontrole to automatyczna kontrola, a nie pełny audyt, i nie są poradą prawną. Pozostałe kryteria dotyczące obrazów i kolorów znajdują się w naszym przeglądzie WCAG i w liście kontrolnej WCAG 2.2.

Najczęstsze pytania

Co WCAG mówi o tekście alternatywnym?

Kryterium sukcesu 1.1.1 Treść nietekstowa (poziom A) wymaga alternatywy tekstowej pełniącej równoważny cel dla całej treści nietekstowej. Obrazy dekoracyjne muszą być zaimplementowane tak, by technologia wspomagająca mogła je pominąć, zwykle przez pusty atrybut alt.

Kiedy tekst alternatywny powinien być pusty?

Gdy obraz jest czysto dekoracyjny albo gdy ta sama informacja jest już w tekście tuż obok, np. logo obok widocznej nazwy firmy w tym samym linku. Należy użyć alt="" – pominięcie atrybutu jest niezgodnością, bo czytniki ekranu mogą odczytać nazwę pliku.

Jak napisać tekst alternatywny dla przycisku z ikoną?

Opisać akcję, a nie obrazek: „Szukaj” dla lupy, „Drukuj tę stronę” dla ikony drukarki, „Usuń z koszyka” dla kosza. Poradnik W3C o obrazach używa dwóch pierwszych jako przykładów.

Czy kontrola obrazów oceni, czy mój tekst alternatywny jest dobry?

Tylko częściowo. Kontrole automatyczne znajdują obrazy, przyciski graficzne, grafiki SVG i obszary map obrazów bez żadnej alternatywy tekstowej oraz teksty alternatywne powtarzające pobliski tekst. To, czy tekst naprawdę opisuje obraz, musi ocenić człowiek.

Czy obrazy tekstu są dozwolone w WCAG?

Na poziomie AA kryterium 1.4.5 Obrazy tekstu wymaga użycia prawdziwego tekstu zamiast tekstu w obrazach, jeśli pozwala na to technologia. Wyjątkiem są logotypy. Jeśli używany jest obraz tekstu, jego tekst alternatywny powinien zawierać te same słowa.

Źródła

• W3C, Understanding 1.4.5 Images of Text: https://www.w3.org/WAI/WCAG22/Understanding/images-of-text.html
• W3C, Understanding 1.1.1 Non-text Content: https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html
• W3C WAI, Images tutorial: https://www.w3.org/WAI/tutorials/images/
• W3C WAI, An alt decision tree: https://www.w3.org/WAI/tutorials/images/decision-tree/
• W3C WAI, Functional images: https://www.w3.org/WAI/tutorials/images/functional/
• W3C, WCAG 2.2: https://www.w3.org/TR/WCAG22/