Co sprawdza ta reguła
Elementy <img> mają atrybut alt lub rolę none albo presentation.
Dlaczego to ważne
WCAG 1.1.1 wymaga tekstu alternatywnego dla obrazów niosących treść. Bez niego osoba korzystająca z czytnika ekranu nie wie, jaki produkt przedstawia zdjęcie.
Jak to naprawić
Na dowolnej stronie
- W systemie CMS lub szablonie dodaj do tekstu alternatywnego każdego obrazu krótki, konkretny opis.
- Opisz to, co ważne dla kupującego: nazwę produktu, kolor i ujęcie (np. „Płócienna torba w kolorze oliwkowym, widok z przodu”).
- Obrazy dekoracyjne powinny mieć pusty atrybut alt (alt=""), aby czytniki ekranu je pomijały.
W Shopify
- W panelu administracyjnym Shopify otwórz Produkty > [produkt] > Multimedia, kliknij każdy obraz i uzupełnij pole „Tekst alternatywny”. W przypadku obrazów w sekcjach otwórz Sklep online > Motywy > Dostosuj i ustaw tekst alternatywny obrazu w ustawieniach sekcji.
- Opisz to, co ważne dla kupującego: nazwę produktu, kolor i ujęcie (np. „Płócienna torba w kolorze oliwkowym, widok z przodu”).
- Obrazy dekoracyjne powinny mieć pusty atrybut alt (alt=""), aby czytniki ekranu je pomijały.
W WooCommerce i WordPressie
- W WordPressie otwórz Media > Biblioteka, zaznacz każdy obraz i uzupełnij pole „Tekst alternatywny”. Obrazy w galerii produktu korzystają z tego samego pola.
- Opisz to, co ważne dla kupującego: nazwę produktu, kolor i ujęcie (np. „Płócienna torba w kolorze oliwkowym, widok z przodu”).
- Obrazy dekoracyjne powinny mieć pusty atrybut alt (alt=""), aby czytniki ekranu je pomijały.
Jak sprawdzić poprawkę
- Przeskanuj ponownie podstrony, których to dotyczy.
- Użyj czytnika ekranu (VoiceOver: Cmd+F5 na Macu), aby usłyszeć, jak odczytywane są obrazy produktów.
Jak FixReports to wykrywa
Nasz skan uruchamia regułę axe-core image-alt w prawdziwej przeglądarce Chrome na każdej testowanej stronie i zgłasza każdy błędny element wraz z podstroną, jego kodem HTML i, tam gdzie ma to zastosowanie, zrzutem ekranu.
Test automatyczny potwierdza, że ten konkretny problem występuje. Nie rozstrzyga, czy reszta strony jest dostępna: niektóre bariery wychodzą na jaw dopiero wtedy, gdy stronę sprawdzi człowiek.