# Obrázky musí mít alternativní text

<https://www.fixreports.com/cs/issues/image-alt>

WCAG 1.1.1 Non-text Content · úroveň A

Obrázkům chybí textová alternativa, takže uživatelé čteček obrazovky nevědí, co zobrazují.

## 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
1. Ve svém CMS nebo šabloně doplňte do alternativního textu každého obrázku krátký a konkrétní popis.
2. 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“).
3. Dekorativní obrázky by měly mít prázdný atribut alt (alt=""), aby je čtečky obrazovky přeskočily.

### V Shopify
1. 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.
2. 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“).
3. 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
1. 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.
2. 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“).
3. 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í.

## Zdroje
- Dokumentace pravidla axe-core (Deque): https://dequeuniversity.com/rules/axe/4.13/image-alt
- Vysvětlení kritéria WCAG 1.1.1 (W3C): https://www.w3.org/WAI/WCAG22/Understanding/non-text-content