WCAG 1.4.5 Obrázky textu

Kritérium úspěšnosti 1.4.5 zajišťuje, že text si mohou přizpůsobit lidé, kteří ho čtou. Skutečný text lze zvětšit bez rozmazání, přebarvit vysoce kontrastním nastavením, rozvolnit, přečíst nahlas a přeložit. Text vložený do obrázku ne. Jde o úroveň AA a je součástí normy EN 301 549 (článek 9.1.4.5). Na harmonizovanou normu EN 301 549 odkazuje i český zákon č. 424/2023 Sb.

Co kritérium vyžaduje

Pokud technologie, které používáte, dokážou dosáhnout požadované vizuální podoby, musí se ke sdělení informace použít text, ne obrázky textu.

Výjimky:

• Přizpůsobitelné: obrázek textu lze vizuálně přizpůsobit požadavkům uživatele (písmo, velikost, barva, pozadí);
• Nezbytné: konkrétní podoba textu je pro informaci nezbytná — například ukázka písma nebo historický dokument.

Logotypy (text, který je součástí loga nebo názvu značky) se považují za nezbytné.

S moderními webovými fonty a CSS lze téměř jakýkoli typografický vzhled vytvořit skutečným textem, takže výjimky jsou úzké.

Typické chyby v e-shopu

• úvodní a propagační bannery s nabídkou, termíny a podmínkami jako součást JPG;
• dlaždice kategorií, kde je název kategorie v obrázku;
• tabulky velikostí, složení nebo pokyny k údržbě nahrané jako obrázky;
• „Doprava zdarma nad 50 €“ nebo sdělení o důvěryhodnosti jako obrázkové pruhy;
• tlačítka z obrázků, které obsahují popisek.

Jak to zkontrolovat

Automaticky: k tomuto kritériu se v našem nástroji neváže žádné automatické pravidlo. Nástroj nedokáže spolehlivě poznat, zda obrázek obsahuje text. Je potřeba ruční kontrola. Náš nástroj však hlásí obrázky bez alternativního textu v rámci 1.1.1, čímž často najde tytéž bannery.

Ručně: přibližte stránku na 200–400 %: text v obrázcích se rozmaže. Zkuste text označit myší: pokud to nejde, je to pravděpodobně obrázek. Projděte úvodní stránku, kategorie a stránky produktů i vstupní stránky z newsletterů a sepište každý obrázek, který obsahuje slova. U každého rozhodněte, zda by stejný vzhled mohl vytvořit skutečný text.

Jak to opravit

• Bannery stavte jako obrázek na pozadí s vrstvou textu v HTML nad ním; většina šablon e-shopů na to má sekci „slideshow“ nebo „obrázek s textem“.
• Tabulky velikostí a složení zveřejněte jako tabulky nebo seznamy v HTML.
• Pro zvláštní typografii používejte webové fonty místo obrázků.
• Text v obrázcích ponechte jen u log a skutečně nezbytných případů a dejte jim alternativní text.

Související kritéria

• 1.1.1 Netextový obsah — alternativní text obrázků.
• 1.4.3 Kontrast (minimální) — platí i pro obrázky textu.
• 1.4.4 Změna velikosti textu — text musí jít zvětšit na 200 %.

Časté otázky

Jsou loga s textem dovolena?

Ano. Logotypy — text, který je součástí loga nebo názvu značky — se považují za nezbytné a jsou výjimkou. Podle 1.1.1 ale stále potřebují alternativní text.

Stačí u banneru s textem alternativní text?

Alternativní text splňuje 1.1.1, ale ne 1.4.5. Pokud lze stejného vzhledu dosáhnout textem v HTML a CSS, má být text skutečným textem, aby ho uživatelé mohli zvětšit, přebarvit a přeložit.

Jsou problémem produktové fotografie s potištěným textem?

Ne. WCAG nepovažuje za obrázek textu text, který je součástí obrázku s jiným podstatným vizuálním obsahem, například etiketu na produktové fotografii. Důležité detaily by přesto měly být v popisu produktu.