Doporučený postup Priorita: Drobné
Popis obrázku opakuje text vedle něj
Alternativní text obrázku je stejný jako viditelný text vedle něj, například fotka produktu s alternativním textem „Modrá lněná košile“ v odkazu, který také zní „Modrá lněná košile“. Jde o doporučený postup, nikoli o požadavek WCAG úrovně AA.
Tento text byl přeložen automaticky a rodilý mluvčí ho zatím nezkontroloval.
Proč na tom záleží vašim zákazníkům
Uživatelé čteček obrazovky slyší stejná slova dvakrát a na stránce kategorie se to opakuje u každé karty produktu. Procházení je pomalejší a únavnější, i když se žádná informace neztrácí.
Koho se to týká
- uživatelé čteček obrazovky
- nevidomí lidé
- uživatelé braillských řádků
Jak to opravit
Pokud obrázek k textu vedle ničím nepřispívá, dejte mu prázdný alt (alt=""), aby ho čtečky obrazovky přeskočily. Pokud ukazuje něco užitečného, napište alternativní text, který popisuje odlišnost, například barvu nebo úhel pohledu, místo opakování názvu produktu. Viditelný text ponechte beze změny.
V Shopify
Časté v kartách produktů, kde šablona používá název produktu jako alt obrázku vedle odkazu s názvem. Upravte snippet karty v Liquid tak, aby alt byl prázdný, když je název hned vedle, nebo napište vlastní alternativní texty k médiím produktu v administraci.
V Shoptet (CZ)
Alternativní text obrázků produktů obvykle vychází z názvu produktu nebo popisu obrázku. Vyplňte vlastní popisy obrázků v nastavení produktu; ohledně chování šablony se obraťte na Shoptet nebo partnera.
V PrestaShop
Obrázky produktů ve výpisech často automaticky dostávají jako alternativní text název produktu. Upravte popisky obrázků na stránce produktu nebo šablonu miniatury produktu v motivu.
V WooCommerce
Stává se často, když obrázky produktů ve výpisech obchodu dostávají jako alternativní text název produktu. Změňte alternativní text v knihovně médií nebo upravte šablonu výpisu v podřízené šabloně (child theme).
Normy
Nejde o kritérium WCAG, ale o doporučený postup, který usnadní používání webu.
Automatická kontrola: pravidlo axe-core image-redundant-alt.
dequeuniversity.com, github.com, www.w3.org