WCAG 1.1.1 Treść nietekstowa

Kryterium sukcesu 1.1.1 zapewnia, że osoby, które nie widzą obrazu, i tak otrzymują zawarte w nim informacje. Tekst alternatywny słyszą użytkownicy czytników ekranu, a także osoby, którym obrazy się nie wczytały. To poziom A, pierwsze kryterium WCAG i część normy EN 301 549 (punkt 9.1.1.1); na EN 301 549 opiera się też polska ustawa o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług przez podmioty gospodarcze.

Czego wymaga kryterium

Każda treść nietekstowa — obrazy, ikony, wykresy, przyciski graficzne, grafiki SVG — musi mieć tekst alternatywny, który spełnia równoważny cel. Dla niektórych rodzajów treści WCAG wymaga mniej:

• Elementy sterujące i pola do wprowadzania danych: obraz, który jest przyciskiem lub przyjmuje dane, potrzebuje nazwy opisującej jego cel („Dodaj do listy życzeń”, a nie „serce”).
• Multimedia zależne od czasu (wideo, audio): tekst alternatywny musi przynajmniej je identyfikować; napisy i opisy obejmują kryteria 1.2.x.
• Testy, które w formie tekstu straciłyby sens, oraz treści mające wywołać doznanie zmysłowe (np. utwór muzyczny): co najmniej opisowa identyfikacja.
• CAPTCHA: tekst alternatywny opisujący jej cel oraz alternatywna CAPTCHA wykorzystująca inny zmysł (np. dźwiękowa obok wizualnej).
• Dekoracja, formatowanie, treść niewidoczna: należy je wdrożyć tak, aby technologie wspomagające mogły je pominąć — w HTML przez alt="" lub obraz tła w CSS.

Typowe błędy w sklepie internetowym

• zdjęcia produktów bez atrybutu alt albo z odczytywaną nazwą pliku (IMG_4021.jpg);
• przyciski wyszukiwania, koszyka, konta lub zamknięcia złożone wyłącznie z ikony, bez dostępnej nazwy;
• banery promocyjne z ofertą („−30 % w ten weekend”) wtopioną w obraz i bez tekstu alternatywnego;
• logotypy płatności i znaki zaufania, tabele rozmiarów lub gwiazdki ocen pokazane tylko jako obrazy;

Jak to sprawdzić

Automatycznie: nasz skaner znajduje obrazy, pola typu image, obiekty, grafiki SVG i elementy z role="img" bez tekstu alternatywnego, a także paski postępu i wskaźniki bez nazwy (reguły image alt, input image alt, SVG image alt i pokrewne). Nie oceni, czy istniejący tekst alternatywny jest poprawny, więc brak zgłoszenia nie oznacza, że kryterium jest spełnione.

Ręcznie: należy wyłączyć obrazy w przeglądarce lub użyć czytnika ekranu i przejść przez stronę produktu. Przy każdym obrazie warto zapytać: czy tekst alternatywny przekazuje te same informacje, czy też obraz jest dekoracją i zostaje pominięty? Przyciski z ikonami sprawdza się, przechodząc do nich klawiszem Tab i słuchając ich nazwy.

Jak to naprawić

• Wpisać tekst alternatywny w edytorze produktu na swojej platformie (Shopify, WooCommerce i większość innych mają pole „tekst alternatywny” dla każdego pliku multimedialnego).
• Opisać to, co ważne w danym kontekście: „Niebieska lniana koszula, widok z tyłu” zamiast „koszula”.
• Nadać przyciskom z ikonami widoczną etykietę lub aria-label; samą ikonę ukryć przed technologiami wspomagającymi.
• Dla obrazów czysto dekoracyjnych używać alt="", a nie pomijać atrybutu.
• Do wykresów i infografik dodać krótkie podsumowanie lub tabelę z danymi.

Powiązane kryteria

• 1.4.5 Obrazy tekstu — prawdziwy tekst zamiast tekstu na obrazkach.
• 1.2.1 Tylko audio lub tylko wideo (nagranie) — alternatywy dla plików multimedialnych.
• Bezpłatne sprawdzenie jednej strony — znajdź obrazy bez tekstu alternatywnego w swojej witrynie.

Najczęstsze pytania

Czy każdy obraz musi mieć tekst alternatywny według WCAG?

Każdy obraz potrzebuje tekstu alternatywnego, który spełnia ten sam cel. Wyjątkiem są obrazy czysto dekoracyjne: dostają pusty atrybut alt (alt=""), dzięki czemu czytniki ekranu je pomijają.

Co powinien mówić tekst alternatywny zdjęcia produktu?

To, czego kupujący potrzebuje się dowiedzieć ze zdjęcia: jaki to produkt oraz jaki kolor, wzór lub szczegół widać. Nie należy zaczynać od „zdjęcie przedstawia” ani powtarzać słowo w słowo nazwy produktu, jeśli stoi tuż obok zdjęcia.

Czy przyciski z ikonami podlegają kryterium 1.1.1?

Tak. Element sterujący, taki jak ikona lupy, koszyka czy zamknięcia, musi mieć nazwę opisującą swój cel, np. „Szukaj” albo „Otwórz koszyk”. Kryterium 4.1.2 Nazwa, rola, wartość dodaje kolejne wymagania dla elementów sterujących.

Czy automatyczny skaner może sprawdzić tekst alternatywny?

Może znaleźć obrazy, ikony i grafiki SVG, które w ogóle nie mają tekstu alternatywnego. Nie oceni natomiast, czy istniejący tekst alternatywny jest trafny i przydatny — do tego potrzebny jest człowiek.