Alternativní text a WCAG: jak popsat obrázky, s příklady

Každý obrázek na stránce vyžaduje rozhodnutí: co má místo něj slyšet člověk, který ho nevidí? K tomu slouží alternativní text (alt text). Čtečky obrazovky ho čtou nahlas, vyhledávače ho využívají a prohlížeče ho zobrazí, když se obrázek nenačte. WCAG nepředepisuje přesné znění, ale stanoví jasný požadavek a W3C vydává praktický tutoriál, jak ho splnit. Tato stránka shrnuje obojí, s příklady z e-shopů.

Jde o obecné informace, nikoli o právní poradenství.

Co WCAG požaduje

Požadavkem je 1.1.1 Netextový obsah, úroveň A: veškerý netextový obsah, který se uživateli zobrazuje, má textovou alternativu, která slouží ekvivalentnímu účelu. Existují výjimky. Ovládací prvky potřebují název, který popisuje jejich účel; časová média, testy, smyslové zážitky a CAPTCHA potřebují jen popisnou identifikaci; a dekorace, formátování nebo neviditelný obsah musí být implementované tak, aby je asistivní technologie mohly ignorovat.

Úzce souvisejí ještě dvě kritéria:

• 1.4.5 Obrázky textu (AA): místo textu vloženého do obrázku používejte skutečný text, pokud si obrázek textu nemůže uživatel přizpůsobit nebo pokud konkrétní podoba není nezbytná; loga se za nezbytná považují.
• 2.4.4 Účel odkazu (v kontextu) (A): pokud je obrázek jediným obsahem odkazu, je jeho alternativní text textem odkazu.

Klíčové slovo je účel. Dokument Understanding od W3C ukazuje stejný obrázek glóbu, který na jednom webu potřebuje „International Travel“ (zahraniční cesty) a na jiném „International Campuses“ (zahraniční kampusy). Rozhoduje kontext, ne pixely.

Rozhodovací strom W3C v pěti otázkách

Rozhodovací strom pro alt od W3C se ptá v tomto pořadí:

1. Obsahuje obrázek text? Pokud je stejný text poblíž i jako skutečný text, nebo je text jen vizuálním efektem, použijte prázdný alt. Pokud jde o ikonu s funkcí, popište funkci. Jinak alt obsahuje text z obrázku.
2. Je obrázek v odkazu nebo tlačítku a byl by bez něj účel nejasný? Pak alt popisuje cíl nebo akci.
3. Přidává obrázek význam? Jednoduchá fotka nebo grafika dostane krátký popis tohoto významu; graf nebo diagram potřebuje informaci i jinde na stránce; obrázek, který opakuje okolní text, dostane prázdný alt.
4. Je čistě dekorativní? Pak použijte prázdný alt.
5. Nic z toho? Strom nepokrývá každý případ; viz celý tutoriál o obrázcích.

Informativní obrázky

Fotky a ilustrace, které nesou informaci, dostanou krátký popis podstatné informace, jak to formuluje tutoriál W3C. V e-shopu jde hlavně o fotky produktů.

Naše doporučení nad rámec WCAG: řekněte, o co by člověk přišel — barvu, materiál, detail, kvůli kterému fotka existuje. Nezačínejte slovy „obrázek…“; čtečky obrazovky obrázek ohlásí samy. Buďte struční a dlouhé specifikace dejte do popisu produktu, kde si je přečte každý.

Dekorativní obrázky

Textury na pozadí, oddělovače, ilustrační fotky vedle nadpisu, který už říká vše: použijte alt="" (prázdný atribut) nebo pozadí v CSS. Prázdný alt čtečkám obrazovky říká, aby obrázek přeskočily. Vynechat atribut není totéž: bez něj mohou čtečky obrazovky přečíst název souboru nebo URL.

S „dekorativním“ opatrně. Lifestylová fotka na vstupní stránce může být dekorativní; stejná fotka na stránce produktu, která ukazuje, jak se produkt používá, dekorativní není.

Funkční obrázky: odkazy, tlačítka a ikony

Když je obrázek jediným obsahem odkazu nebo tlačítka, jeho alternativní text pojmenovává cíl nebo akci, ne obrázek. Tutoriál W3C o funkčních obrázcích používá tyto příklady:

• logo, které odkazuje na úvodní stránku: „W3C home“ (úvodní stránka W3C), ne „logo“;
• lupa na tlačítku vyhledávání: „Hledat“;
• ikona tiskárny: „Vytisknout tuto stránku“, ne „tiskárna“.

V e-shopu tentýž princip dává „Košík“, „Odebrat z košíku“, „Další fotka“, „Přidat do oblíbených“. Pokud ikona stojí vedle viditelného textu, který už to říká — ikona košíku následovaná slovem „Košík“ —, dostane samotná ikona prázdný alt nebo se skryje před asistivními technologiemi, aby se název nečetl dvakrát.

Loga

• Logo jako jediný obsah odkazu na úvodní stránku: alt říká, kam odkaz vede, například „Úvodní stránka Example Shop“.
• Logo vedle názvu firmy jako textu ve stejném odkazu: prázdný alt, protože text ho už pojmenovává.
• Loga partnerů nebo platebních metod: alt jmenuje značku („Visa“, „Trusted Shops“), protože logo tuto informaci nese.

Loga jsou také vyňata z požadavku na kontrast i z 1.4.5 Obrázky textu.

Obrázky textu

Bannery s výprodejem, kde je sleva napsaná přímo v obrázku, jsou klasickým případem z e-shopů. Podle 1.4.5 by takový text měl být, kde je to možné, skutečným textem HTML přes obrázek, aby šel přiblížit, přebarvit a přeložit. Pokud obrázek textu zůstane, tutoriál W3C říká, že textová alternativa by měla obsahovat stejná slova jako obrázek — celé „Letní výprodej −30 % do 31. srpna“, ne „banner“.

Složité obrázky a skupiny

• Grafy, tabulky velikostí jako obrázky, infografiky: krátký alt, který říká, o co jde, a k tomu úplná informace v textu nebo v tabulce poblíž. W3C doporučuje, kde je to praktické, poskytnout podkladová data.
• Skupiny obrázků, například pět hvězdiček hodnocení: jedna alternativa pro celou skupinu („Hodnocení 4 z 5“), ostatní obrázky prázdné.

Co najde automatická kontrola obrázků

Naše kontroly používají pravidla axe-core pro textové alternativy ve skutečném prohlížeči. Najdou:

• obrázky bez jakékoli textové alternativy (image-alt);
• obrázková tlačítka bez popisu (input-image-alt);
• prvky s rolí obrázku a grafiku SVG bez textové alternativy (role-img-alt, svg-img-alt) — hvězdičková hodnocení, ikony, odznaky;
• oblasti obrázkových map bez popisu (area-alt) a vložené objekty bez popisu (object-alt);
• odkazy a tlačítka bez přístupného názvu, což často znamená ikonu bez popisku;
• jako osvědčený postup alternativní text, který opakuje viditelný text vedle (image-redundant-alt).

Co žádný automatický nástroj neposoudí: zda je „Modrá lněná košile“ správný popis, zda obrázek označený jako dekorativní skutečně dekorativní je a zda banner obsahuje text. To musí posoudit člověk. Více v knihovně pravidel.

Jak zkontrolovat své obrázky

1. Spusťte bezplatný WCAG checker na stránce produktu a stránce kategorie; vypíše obrázky bez alternativ se snímkem obrazovky ke každému.
2. Přečtěte si alternativní texty svých hlavních šablon: produkt, kategorie, úvodní stránka, košík.
3. Zapněte čtečku obrazovky, nebo se podívejte na strom přístupnosti v nástrojích pro vývojáře v prohlížeči, a poslechněte si jednu stránku produktu.
4. Opravte nejdřív šablonu, pak obrázky: většina e-shopových systémů umožňuje nastavit alternativní text každé fotky produktu v administraci.

Naše kontroly jsou automatizovanou kontrolou, nikoli úplným auditem, a nejde o právní poradenství. Další kritéria k obrázkům a barvám najdete v našem přehledu WCAG a v checklistu WCAG 2.2.

Časté otázky

Co říká WCAG o alternativním textu?

Kritérium úspěšnosti 1.1.1 Netextový obsah (úroveň A) požaduje pro veškerý netextový obsah textovou alternativu, která slouží ekvivalentnímu účelu. Dekorativní obrázky musí být implementované tak, aby je asistivní technologie mohly ignorovat, obvykle prázdným atributem alt.

Kdy má být alternativní text prázdný?

Když je obrázek čistě dekorativní, nebo když je stejná informace hned vedle v textu, například logo vedle viditelného názvu firmy ve stejném odkazu. Použijte alt="" — vynechat atribut je chyba, protože čtečky obrazovky pak mohou přečíst název souboru.

Jak napsat alternativní text pro tlačítko s ikonou?

Popište akci, ne obrázek: „Hledat“ u lupy, „Vytisknout tuto stránku“ u ikony tiskárny, „Odebrat z košíku“ u koše. První dva příklady používá tutoriál W3C o obrázcích.

Pozná kontrola obrázků, jestli je můj alternativní text dobrý?

Jen částečně. Automatické kontroly najdou obrázky, obrázková tlačítka, grafiku SVG a oblasti obrázkových map bez jakékoli textové alternativy a alternativní text, který opakuje okolní text. Zda text obrázek skutečně popisuje, musí posoudit člověk.

Povoluje WCAG obrázky textu?

Na úrovni AA žádá 1.4.5 Obrázky textu, abyste místo textu v obrázcích používali skutečný text, kde to technologie umožňuje. Výjimkou jsou loga. Pokud obrázek textu použijete, jeho alternativní text by měl obsahovat stejná slova.

Zdroje

• W3C, Understanding 1.4.5 Images of Text: https://www.w3.org/WAI/WCAG22/Understanding/images-of-text.html
• W3C, Understanding 1.1.1 Non-text Content: https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html
• W3C WAI, Images tutorial: https://www.w3.org/WAI/tutorials/images/
• W3C WAI, An alt decision tree: https://www.w3.org/WAI/tutorials/images/decision-tree/
• W3C WAI, Functional images: https://www.w3.org/WAI/tutorials/images/functional/
• W3C, WCAG 2.2: https://www.w3.org/TR/WCAG22/