Co toto pravidlo kontroluje
Ověřuje, že prvky <img> mají alternativní text nebo roli none či presentation.
Proč na tom záleží
WCAG 1.1.1 vyžaduje textovou alternativu u obrázků, které nesou význam. Bez ní uživatel čtečky obrazovky nepozná, jaký produkt fotka zobrazuje.
Jak to opravit
Na jakémkoli webu
- Ve svém CMS nebo šabloně doplňte do alternativního textu každého obrázku krátký a konkrétní popis.
- Popište, na čem zákazníkovi záleží: název produktu, barvu a zobrazený úhel pohledu (například „Plátěná taška v olivové barvě, pohled zepředu“).
- Dekorativní obrázky by měly mít prázdný atribut alt (alt=""), aby je čtečky obrazovky přeskočily.
V Shopify
- V administraci Shopify otevřete Produkty > [produkt] > Média, klikněte na každý obrázek a vyplňte „Alternativní text“. U obrázků v sekcích otevřete Online obchod > Motivy > Přizpůsobit a alternativní text obrázku nastavte v nastavení sekce.
- Popište, na čem zákazníkovi záleží: název produktu, barvu a zobrazený úhel pohledu (například „Plátěná taška v olivové barvě, pohled zepředu“).
- Dekorativní obrázky by měly mít prázdný atribut alt (alt=""), aby je čtečky obrazovky přeskočily.
Ve WooCommerce a WordPressu
- Ve WordPressu otevřete Média > Knihovna médií, vyberte každý obrázek a vyplňte „Alternativní text“. Obrázky v produktové galerii používají stejné pole.
- Popište, na čem zákazníkovi záleží: název produktu, barvu a zobrazený úhel pohledu (například „Plátěná taška v olivové barvě, pohled zepředu“).
- Dekorativní obrázky by měly mít prázdný atribut alt (alt=""), aby je čtečky obrazovky přeskočily.
Jak opravu ověřit
- Znovu otestujte dotčené stránky.
- Pomocí čtečky obrazovky (VoiceOver: Cmd+F5 na Macu) si poslechněte, jak se produktové obrázky oznamují.
Jak to FixReports zjišťuje
Náš sken spouští pravidlo axe-core image-alt ve skutečném prohlížeči Chrome na každé testované stránce a hlásí každý chybný prvek spolu se stránkou, jeho kódem a tam, kde to dává smysl, i snímkem obrazovky.
Automatický test potvrzuje, že tento konkrétní problém existuje. Nedokáže posoudit, zda je zbytek stránky přístupný: některé bariéry se ukážou, až když stránku zkontroluje člověk.