Audit přístupnosti webu pravidelně odhaluje dvě kategorie problémů s obrázky – chybějící nebo špatně napsané alt texty a soubory, které stránku zbytečně zpomalují. Oba tyto problémy spolu souvisejí víc, než se na první pohled zdá. Jak to napravit bez nutnosti najímat specialistu na každý dílčí krok a jak pomůže s obrázky komprese Optibot? To se dočtete na následujících řádcích.
Co je to přístupnost webu
Přístupnost (accessibility) popisuje stav, kdy web funguje pro všechny uživatele bez ohledu na jejich schopnosti nebo způsob přístupu. To znamená lidi se zrakovým postižením, kteří používají čtečky obrazovky, uživatele s motorickými omezeními ovládající web klávesnicí, osoby se sníženým kontrastem vnímání barev i uživatele na pomalém mobilním připojení.
Posledně jmenovaná skupina bývá v diskusích o přístupnosti opomíjena, nicméně technicky i prakticky platí totéž: web, který se nenačte do tří sekund, není přístupný pro uživatele na 3G síti stejně jako web bez alt textů není přístupný pro uživatele čtečky obrazovky. Výkon stránky a přístupnost proto nejsou dvě oddělené disciplíny a při auditu se často řeší zároveň.
Alt texty – zde weby selhávají nejčastěji
Alt atribut obrázku plní dvě funkce. Čtečka obrazovky ho přečte uživateli místo obrázku a Google ho používá jako součást indexace obrazového obsahu. Přesto chybí nebo je napsán špatně na většině webů.
Čtyři nejčastější chyby při psaní alt textů jsou:
- Prázdný alt atribut u obsahových obrázků. alt=““ říká čtečce obrazovky, že obrázek nemá alternativní popis a přeskočí ho. To je správné chování pro dekorativní obrázky – ikonky, oddělovače, pozadí. Pro obrázky nesoucí informaci je prázdný alt závažná přístupnostní chyba.
- Popis souboru místo popisu obsahu. alt=“IMG_20240315_142233.jpg“ nepomůže ani uživateli čtečky, ani Googlu. Alt text popisuje, co na obrázku je, nikoli jak se soubor jmenuje.
- Klíčové slovo místo popisu. alt=“dentální hygiena Praha levně“ je SEO spam, nikoli alternativní text. Čtečka obrazovky ho přečte celý a kontext sdělení se ztratí. Alt text má být přirozená věta popisující obsah obrázku.
- Nadměrná délka. Alt text delší než dvě věty je pro uživatele čtečky obrazovky kontraproduktivní. Pokud obrázek potřebuje dlouhý popis, patří ten popis do textu stránky nebo do atributu longdesc, nikoli do alt.
Kdy alt text vynechat záměrně
Dekorativní obrázky, třeba pozadí sekcí, oddělovací čáry, či abstraktní grafické prvky bez informačního obsahu dostanou atribut alt=““. Čtečka obrazovky je přeskočí a nezdržuje uživatele popisem vizuálního šumu.
Komprese obrázků je také součást přístupnosti
Výkon stránky vstupuje do přístupnosti třemi cestami. Pomalé načítání znevýhodňuje uživatele na pomalém připojení a starších zařízeních. Těžké obrázky zvyšují spotřebu dat, která není zanedbatelná pro uživatele s omezeným datovým tarifem. A špatné Core Web Vitals metriky snižují pozice ve vyhledávání, takže část uživatelů web vůbec nenajde.
Nejčastější chyby při komprimování obrázků, které brzdí výkon webu, ukazují, že problémy vznikají zpravidla ne ze záměru, ale z přehlédnutí – soubory se nahrávají tak, jak přijdou od grafika nebo fotografa, bez mezikroku komprese.
Pro kompresi souborů před nahráním na web slouží komprese OptiBot. Nástroj zpracovává soubory přímo v prohlížeči, podporuje zpracování více obrázků naráz a vizuální porovnání výsledku před stažením. Pro správce webu, kteří pravidelně přidávají obsah, jde o rychlý mezikrok, který nevyžaduje technické znalosti ani instalaci softwaru.
Co dalšího audit přístupnosti u obrázků odhalí
Kromě alt textů a velikosti souborů existují další oblasti, které standardní audit přístupnosti kontroluje u obrázků.
- Kontrast textu v obrázcích. Text vložený přímo do obrázku (nadpisy na bannerech, popisky v infografikách) musí splňovat minimální kontrastní poměr 4,5:1 pro normální text a 3:1 pro velký text podle standardu WCAG 2.1. Tento text navíc nelze přečíst čtečkou obrazovky bez alt textu – a ani s ním, pokud alt text obsah věrně nepřepisuje.
- Obrázky jako jediný nosič informace. Pokud stránka zobrazuje důležitou informaci výhradně jako obrázek (kontaktní údaje naskenované z vizitky, otevírací dobu jako fotku cedule), tato informace není dostupná uživatelům čteček ani vyhledávacím robotům. Textová alternativa patří přímo do HTML.
- Responzivní chování obrázků. Obrázek bez atributů width a height způsobuje CLS (Cumulative Layout Shift) – obsah pod obrázkem poskočí dolů, jakmile se obrázek načte. WCAG toto přímo neřeší, nicméně Google Core Web Vitals ano a výsledek je špatné skóre přístupnosti i výkonu současně.
- Animované obrázky a záchvatová porucha. WCAG 2.1 kritérium 2.3.1 zakazuje obsah, který bliká více než třikrát za sekundu. Animované GIF bannery s rychlým blikáním nebo stroboskopickými efekty porušují toto pravidlo. Před nasazením animovaného banneru na web stojí za to ověřit snímkovou frekvenci přechodů. Více o kritériích WCAG zde.
Jak přistoupit k auditu obrázků na vlastním webu
Systematický průchod webem z hlediska obrázků nevyžaduje specializovaný software. Tři nástroje, které ve většině případů postačí, jsou:
- Google Lighthouse (záložka Audits v Chrome DevTools) prověří alt texty, velikost obrázků, správné rozměry a LCP metriku v jednom průchodu. Výsledek je seznam konkrétních problémů seřazených podle dopadu na skóre.
- WAVE (Web Accessibility Evaluation Tool) od WebAIM vizuálně označí přímo na stránce každý obrázek bez alt textu nebo s prázdným alt atributem. Jde o bezplatný nástroj dostupný jako rozšíření prohlížeče.
- Google Search Console v sekci Core Web Vitals ukáže, které stránky mají špatné LCP skóre – to jsou zpravidla stránky s těžkými obrázky, které neprošly kompresí.
Výsledky auditu zpravidla ukážou, že největší podíl problémů se koncentruje na několika málo typech obsahu: produktové fotografie bez alt textů, bannery a grafika bez komprese, obrázky bez definovaných rozměrů. Oprava těchto tří kategorií pokryje většinu přístupnostních a výkonnostních problémů s obrázky bez nutnosti procházet celý web stránku po stránce.
