TIP#1359: Proč jsou důležité ALT texty (popisky) obrázků na webu?

TIP#1359: Proč jsou důležité ALT texty (popisky) obrázků na webu?

Pokud chcete odpověď „pro lidi“, tak je to prosté. Protože se objeví všude tam, kde obrázek není možné zobrazit nebo ho není možné vidět. Těm co jsou nevidomí či slabozrací tak výrazně pomáhají v možnosti pracovat s webovými stránkami. Právě tohle je vlastně ten nejzásadnější důvod.

Pokud provozujete obsahový web, noviny, časopis, magazín, tak popisky (ALT) u obrázků jsou prostě zásadní a měli byste jim věnovat čas a úsilí. Pokud se podíváte na @365tipů, tak uvidíte, že tady kovářova kobyla chodí bosa a měl bych přemýšlet nad napravením. O což jsem se už párkrát pokoušel, ale zdejší tipy do systému míří ve velmi krátkém dostupném čase, takže tohle je prostě důsledek.

Jak důležité to je se můžete podívat třeba i ve WCAG 2.0 a to hned na prvním bodě pravidel: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.

Pokud chcete odpověď „pro stroje“, tak protože je to hlavní text, který se vztahuje k danému obrázků ve vyhledávačích. Z tohoto v zásadě čistě technického pohledu jsou ALT prvky u obrázků důvodem pro klasickou práci s ohledem na SEO – tedy nejenom že mají popisovat obrázek pro lidi, měly by ještě navíc obsahovat potřebná klíčová slova a fráze.

Z výše uvedeného tedy plyne, že u ALT popisků obrázků bude vždy kombinovat snahu vysvětlit co je na obrázku (či čeho se týká) pro lidi s potřebou pro správnou indexaci a zahrnutí do vyhledávače.

2019-05-12 10_32_40-Upravit příspěvek ‹ @365tipu - Tipy a triky — WordPress.com.png
WordPress umožňuje ke každému obrázku vyplnit vše potřebné. U obrázku v záhlaví se k tomu ale dá dostat až přes několik kliknutí. Obecně by se vyplatilo, kdyby cestu k vyplnění ALT zásadně zjednodušil. Tento text pod obrázkem (Caption) ale nemá s obrázkem vlastně nic společného.  Pozor na to, že pokud nejprve napíšete Caption a pak budete chtít doplnit ALT, tak se vám Caption smaže (ano, chyba).

Také platí, že nemá smysl v ALT uvádět slova jako „Obrázek“ či „Fotografie“ – čtečky pro nevidomé či slabozraké to doplní, vyhledávače moc dobře vědí, že je to obrázek. Jedním z dobrých doporučení je ALT brát jako větu – a také ji tedy ukončit tečkou – ocení to právě uživatelé čteček. Ta věta by opravdu měla popisovat co je v obrázku – nic víc, žádné informace o autorovi, zdroji, atd.

POZNÁMKA: Jste zmateni? IMG má ALT a TITLE a vy nevíte co s tím? Jednoduché, správně je ALT, na TITLE většinou zapomeňte. Dobré vědět je , že ALT je čten čtečkami, TITLE je zpravidla pouze zobrazeno poté, co najedete nad obrázek kurzorem (a tím pádem v mobilních zařízení vůbec nefunguje).

Pracujte s ALT každopádně i střízlivě – jsou chvíle, kdy je lepší je vynechat, hlavně proto, že při rolování stránkou by nevidomí/slabozrací byli zaplavování stále se opakujícím textem – jako dobrý příklad je pohled na newsfeed na Facebooku či Twitter kde u každého příspěvku je profilový obrázek – ten by ALT mít neměl. Stejně tak je dobré ALT vynechat v seznamech odkazů na další články na obsahových webech – zpravidla by se tam jenom opakoval titulek.

Ale pozor, „vynechat“ ALT neznamená, že ho vůbec neuvedete. Správná cesta je, že použijete ALT=““ nebo ALT=“ „. Což, mimochodem, děláte i s ohledem na čtečky pro nevidomé či slabozraké.

ALT ale nikdy nezapomeňte nastavit u všech ovládacích prvků/ikon, které nemají doprovodný text.  Tam musí ALT popisovat k čemu daný prvek slouží či kam vede (pokud je to odkaz).

TIP: Dobře zpracovaný přehled s dalšími užitečnými pravidla najdete v Alt-texts: The Ultimate Guide

Pokud chcete dál studovat něco souvisejícího, najděte si přes Google povídání o LONGDESC.

Další tipy a triky pro webdesign hledejte v ‣ Pomocník Webdesignera