Zalecana praktyka Priorytet: Drobne
Opis obrazu powtarza tekst obok
Tekst alternatywny obrazu jest taki sam jak widoczny tekst obok, np. zdjęcie produktu z tekstem alternatywnym „Niebieska lniana koszula” w linku, który także brzmi „Niebieska lniana koszula”. To zalecana dobra praktyka, a nie wymóg WCAG na poziomie AA.
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 słyszą te same słowa dwa razy, a na stronie kategorii powtarza się to przy każdej karcie produktu. Przeglądanie staje się wolniejsze i bardziej męczące, choć żadna informacja nie ginie.
Kogo to dotyczy
- użytkownicy czytników ekranu
- osoby niewidome
- osoby korzystające z monitorów brajlowskich
Jak to naprawić
Jeśli obraz nic nie dodaje do tekstu obok, nadaj mu pusty alt (alt=""), aby czytniki ekranu go pomijały. Jeśli pokazuje coś przydatnego, napisz tekst alternatywny opisujący to, co się różni, np. kolor lub ujęcie, zamiast powtarzać nazwę produktu. Widoczny tekst pozostaw bez zmian.
W Shopify
Częste w kartach produktów, gdzie motyw używa nazwy produktu jako alt obrazu obok linku z nazwą. Zmień snippet karty w Liquid, aby alt był pusty, gdy nazwa jest tuż obok, albo wpisz osobne teksty alternatywne dla mediów produktu w panelu.
W Shoptet (CZ)
Tekst alternatywny zdjęć produktów zwykle pochodzi z nazwy produktu lub opisu zdjęcia. Uzupełnij osobne opisy zdjęć w ustawieniach produktu; w sprawie działania szablonu zwróć się do Shoptet lub partnera.
W PrestaShop
Zdjęcia produktów na listach często automatycznie dostają nazwę produktu jako tekst alternatywny. Edytuj podpisy zdjęć na stronie produktu albo popraw szablon miniatury produktu w motywie.
W WooCommerce
Zdarza się często, gdy zdjęcia produktów na listach sklepu dostają nazwę produktu jako tekst alternatywny. Zmień tekst alternatywny w bibliotece mediów albo popraw szablon listy w motywie potomnym.
Normy
To nie kryterium WCAG, lecz zalecana praktyka, która ułatwia korzystanie ze strony.
Automatyczny test: reguła axe-core image-redundant-alt.
dequeuniversity.com, github.com, www.w3.org