Alternativní texty obrázků: kdy je napsat a kdy je nechat prázdné
Alternativní text (atribut alt) je krátký popis obrázku, který se může zobrazit, když se obrázek nenačte – a především ho odečítač obrazovky přečte nevidomému zákazníkovi. Zní to jako maličkost, ale v e-shopu plném produktových fotografií, ikon a bannerů je to jedno z míst, kde zbytečně vznikají bariéry.
Běžný problém: každý obrázek dostane stejný typ popisu
U alternativních textů se v praxi opakují tři chyby.
Chybějí. U fotografie produktu bez atributu alt může odečítač obrazovky oznámit název souboru – „IMG_4837.jpg“ – nebo obrázek přeskočit. Zákazník tak nemusí vědět, co obrázek znázorňuje.
Jsou tam zbytečně. Dekorativní čára, stín pod kartou nebo ikona vedle textu, který už vše říká, dostane popis „obrázek“ nebo „dekorace“. Odečítač ho přečte u každého prvku a z nákupu se stane nesrozumitelné mumlání.
Jsou přeplněné klíčovými slovy. „levná pánská bunda zimní outdoor sleva eshop“ – text napsaný pro vyhledávač, ne pro člověka. Takový popis nepomáhá pochopit účel obrázku.
Společný důvod: nikdo nerozlišuje, k čemu daný obrázek na stránce slouží. A od toho se všechno odvíjí.
Jak zvolit alternativní text podle účelu obrázku
Pravidlo je jednoduché a dá se použít pro jakýkoli obrázek: zeptejte se, jakou úlohu na stránce plní.
- Nese informaci (fotografie produktu, graf, screenshot návodu) →
altpopíše to podstatné. U produktu uvede název a klíčový rozlišovací znak: „Modrá pánská bunda s kapucí, pohled zepředu.“ Ne „obrázek“, ne „fotografie produktu“ – odečítač už ví, že jde o obrázek. - Je jen ozdobou (oddělovač, stín, dekorativní ikona vedle textu) → prázdný
alt="". To není chyba, ale záměr: říká odečítači „toto přeskoč“. - Je to tlačítko nebo odkaz (ikona košíku, lupa vyhledávání) →
altpopíše akci, ne vzhled: „Vyhledat“, „Přidat do košíku“. Ne „lupa“. - Je složitý (graf, infografika) → krátký
alta podrobný popis v textu pod ním.
V nakonfigurovaných automatických kontrolách dokážeme upozornit na chybějící atribut alt. Zda je text vzhledem k účelu obrázku smysluplný, však musí posoudit člověk; automatický skener má v této oblasti své hranice.
Co vám správné popisy přinesou
- Nevidomý zákazník se v katalogu lépe zorientuje a může pokračovat v nákupu.
- Odečítač neztrácí čas dekoracemi, takže je web použitelný, ne jen technicky „v pořádku“.
- Chybějící atributy lze odhalovat průběžně při automatických bězích, zatímco kvalitu textu ověří redakční nebo manuální kontrola.
Další krok
Nejste si jisti, zda jsou vaše obrázky popsány smysluplně – nebo vůbec? Na nezávazné konzultaci domluvíme rozsah vstupního skenu a ukážeme, kde chybějící popisy vytvářejí bariéru.