WCAG 1.1.1 Netextový obsah

Kritérium úspěšnosti 1.1.1 zajišťuje, že lidé, kteří obrázek nevidí, přesto získají informaci, kterou nese. Uživatelé čtečky obrazovky uslyší textovou alternativu a stejně tak ji uvidí lidé, kterým se obrázky nenačetly. Jde o úroveň A, první kritérium WCAG, a je součástí normy EN 301 549 (článek 9.1.1.1). Na harmonizovanou normu EN 301 549 odkazuje i český zákon č. 424/2023 Sb.

Co kritérium vyžaduje

Veškerý netextový obsah — obrázky, ikony, grafy, obrázková tlačítka, SVG — musí mít textovou alternativu, která plní rovnocenný účel. U některých typů obsahu WCAG požaduje méně:

• Ovládací prvky a vstupy: obrázek, který je tlačítkem nebo přijímá vstup, potřebuje název popisující jeho účel („Přidat do oblíbených“, ne „srdce“).
• Časově založená média (video, audio): textová alternativa je musí alespoň identifikovat; titulky a popisy řeší kritéria 1.2.x.
• Testy, které by v textové podobě ztratily smysl, a obsah určený k vytvoření smyslového zážitku (například hudební skladba): alespoň popisná identifikace.
• CAPTCHA: textová alternativa popisující její účel a navíc alternativní CAPTCHA využívající jiný smysl (například zvukovou vedle vizuální).
• Dekorace, formátování, neviditelný obsah: musí být implementovány tak, aby je asistivní technologie mohly ignorovat — v HTML pomocí alt="" nebo obrázku na pozadí v CSS.

Typické chyby v e-shopu

• produktové fotografie bez alt, nebo s názvem souboru (IMG_4021.jpg), který se pak předčítá;
• tlačítka jen s ikonou pro hledání, košík, účet nebo zavření bez přístupného názvu;
• propagační bannery s nabídkou („−30 % tento víkend“) vloženou přímo do obrázku a bez alternativního textu;
• loga platebních metod a důvěryhodnosti, tabulky velikostí nebo hvězdičky hodnocení zobrazené jen jako obrázky;

Jak to zkontrolovat

Automaticky: náš nástroj najde obrázky, obrázková vstupní pole, objekty, SVG a prvky s role="img", které nemají textovou alternativu, a také ukazatele průběhu a měřidla bez názvu (pravidla alternativní text obrázku, alternativní text obrázkového vstupu, alternativní text obrázku SVG a související). Neumí posoudit, zda je existující alternativní text správný, takže chybějící nález neznamená, že je kritérium splněno.

Ručně: vypněte v prohlížeči obrázky nebo použijte čtečku obrazovky a projděte stránku produktu. U každého obrázku se zeptejte: dává alternativní text stejnou informaci, nebo je obrázek dekorací a zůstává tichý? Tlačítka s ikonou zkontrolujte tak, že se na ně přesunete klávesou Tab a poslechnete si jejich název.

Jak to opravit

• Alternativní text pište v editoru produktu na své platformě (Shopify, WooCommerce i většina dalších mají u každého média pole „alternativní text“).
• Popište, na čem v kontextu záleží: „Modrá lněná košile, pohled zezadu“ místo „košile“.
• Dejte tlačítkům s ikonou viditelný popisek nebo aria-label; samotnou ikonu před asistivními technologiemi skryjte.
• U čistě dekorativních obrázků použijte alt="", ne chybějící atribut.
• Ke grafům a infografikám přidejte krátké shrnutí nebo tabulku s daty.

Související kritéria

• 1.4.5 Obrázky textu — místo textu v obrázcích používejte skutečný text.
• 1.2.1 Pouze audio a pouze video (záznam) — alternativy pro mediální soubory.
• Bezplatná kontrola jedné stránky — najděte na svém webu obrázky bez alternativního textu.

Časté otázky

Potřebuje podle WCAG každý obrázek alternativní text?

Každý obrázek potřebuje textovou alternativu, která plní stejný účel. Výjimkou jsou čistě dekorativní obrázky: dostanou prázdný atribut alt (alt=""), aby je čtečky obrazovky přeskočily.

Co má říkat alternativní text produktové fotografie?

To, co kupující potřebuje z obrázku vědět: produkt a barvu, vzor nebo detail, který ukazuje. Nezačínejte slovy „obrázek…“ a neopakujte doslova název produktu, pokud je hned vedle fotografie.

Spadají tlačítka s ikonou pod 1.1.1?

Ano. Ovládací prvek, jako je ikona lupy, košíku nebo zavření, musí mít název, který popisuje jeho účel, například „Hledat“ nebo „Otevřít košík“. Další požadavky na ovládací prvky přidává 4.1.2 Název, role, hodnota.

Dokáže automatický nástroj otestovat alternativní text?

Dokáže najít obrázky, ikony a SVG úplně bez textové alternativy. Neumí ale posoudit, zda existující alternativní text je přesný nebo užitečný — k tomu je potřeba člověk.