Wymaganie WCAG A/AA Priorytet: Poważne
Zdjęcia nie mają opisu tekstowego
Niektóre obrazy nie mają tekstu alternatywnego, więc osoby, które ich nie widzą, nie dowiadują się, co przedstawiają.
Ten tekst przetłumaczono automatycznie i nie został jeszcze sprawdzony przez native speakera.
Dlaczego to ważne dla Twoich klientów
Osoby korzystające z czytników ekranu nie słyszą nic albo słyszą nazwę pliku, np. „IMG_2041.jpg”, zamiast nazwy produktu, koloru czy oferty. Mogą przeoczyć ważne szczegóły i przejść do sklepu, który opisuje swoje produkty.
Kogo to dotyczy
- niewidomi klienci
- osoby korzystające z czytników ekranu
- osoby z wyłączonymi obrazami lub wolnym internetem
Jak to naprawić
Dodaj atrybut alt do każdego <img>. Krótko opisz to, co ważne przy zakupie (produkt, kolor, kluczowy szczegół). Dla obrazów czysto dekoracyjnych użyj alt="", aby zostały pominięte. Nie powtarzaj „zdjęcie przedstawiające” i nie upychaj słów kluczowych.
W Shopify
Dodaj tekst alternatywny do multimediów produktów i obrazów w sekcjach motywu w panelu Shopify. Jeśli tekst alternatywny istnieje, ale się nie wyświetla, w szablonie Liquid motywu zwykle brakuje atrybutu alt w znaczniku obrazu.
W Shoptet (CZ)
Dodaj opisy do zdjęć produktów i banerów w panelu administracyjnym, jeśli szablon na to pozwala. Jeśli szablon ich nie wyświetla, zwykle potrzebna jest zmiana szablonu przez Shoptet lub partnera Shoptet.
W PrestaShop
Zdjęcia produktów zwykle przejmują alt z legendy obrazu lub nazwy produktu ustawionej w panelu administracyjnym. Sprawdź, czy szablony .tpl motywu wyświetlają atrybut alt, także w modułach takich jak slidery.
W WooCommerce
Uzupełnij pole „Tekst alternatywny” w bibliotece mediów WordPress i sprawdź, czy motyw lub kreator stron go wyświetla. Obrazy wstawiane przez wtyczki lub slidery mogą wymagać osobnych ustawień alt.
Normy
| Norma | Punkt |
|---|---|
| WCAG 2.2 | 1.1.1 (A) Non-text Content |
| WCAG 2.1 | 1.1.1 (A) Non-text Content |
| WCAG 2.0 | 1.1.1 (A) Non-text Content |
| EN 301 549 4.1.1 | 9.1.1.1 |
| EN 301 549 3.2.1 | 9.1.1.1 |
| Section 508 2017 | E205.4 |
| ДСТУ EN 301 549 2022 | 9.1.1.1 |
Automatyczny test: reguła axe-core image-alt.
dequeuniversity.com, github.com, www.w3.org
Podobne testy
-
Strona zawiera przestarzały kod migającego tekstu
WCAG 2.2.2 A
-
Tekst jest trudny do odczytania z powodu niskiego kontrastu
WCAG 1.4.3 AA
-
Niektóre etykiety wskazują niewłaściwy element
WCAG 4.1.2 A
-
Atrybuty dostępności mają nieprawidłowe wartości
WCAG 4.1.2 A