Používejte alternativní text

Aneb další zcela zbytečná chyba, která se na internetu vyskytuje. Chybějící atribut alt u obrázků může způsobit mnoho škody, ale jen málo užitku. V tomto článku se tedy pokusím vyvrátit všechny nejčastější tvrzení proti používání atributu alt.

K určení alternativního textu slouží atribut alt, který se vkládá přímo do tagu . Bude to tedy vypadat nějak takto: <img src=”obrazek.jpg” alt=”alternativní text” width=”50” height=”50”>. Tento text se pak uživateli zobrazí, pokud se, z jakéholiv důvodu, nemůže zobrazit obrázek.

A proč je to vlastně tak důležité, psát tam ten alternativní text? Uživatelé s pomalejším přístupem na internet (klasický modem) si mohou pro vyšší rychlost zobrazování stránek vypnout obrázky a pokud nepoužijete atribut alt, neuvidí namísto obrázku nic, což je velmi nepraktické a web se mnohdy stane nepoužitelným, pokud je na obrázkách příliš závislý. Navíc nevypadá to příliš hezky, když je namísto obrázku pouze klasický rámeček s křížkem, pokud se tam zobrazí alternativní text, uživatel si může alespoň představit, co tam asi tak mohlo být.

Když si vypli obrázky, tak je to přece jejich problém, ne? Jak se to vezme. Ano, je to jejich problém, ale zároveň by uživatelé neměli přijít o žádnou podstatnou informaci, kterou by vyčetli z obrázku, alespoň v rámci možností. Především se tedy jedná o obrázkové odkazy. Pokud u takových obrázků nenadefinujete alt, uživatel s vypnutými obrázky neuvidí nic a nemůže se tak dostat dále, zůstane trčet třeba už na úvodní stránce. Jenom proto, že jste nedefinovali alternativní text. Navíc kdykoliv může dojík k nějakému selhání a obrázky se prostě nenačtou. Co pak?

Na můj web nechodí lidé s vypnutými obrázky. Poměrně klasická výmluva, která se nedá nijak dokázat ani vyvrátit. Jenže alternativní text se zobrazí pokaždé, když daný obrázek v tu chvíli není dostupný, což znamená i ve chvíli, kdy se celá stránka teprve načítá. Pokud máte například obrázkové menu a nepoužijete alt, uživatel musí počkat, než se všechny obrázky načtou a až teprve potom si může vybrat, kterou položku si zvolí. Pokud ovšem alt použijete a vyplníte, uživateli se okamžitě namísto ještě nenačtených obrázklů zobrazí alternativní text a může tak již vesele vybírat, na který odkaz dále klikne.

A co když mám pouze dekorativní obrázek, který nemá žádný smysl? U dekorativních obrázků se to řeší tak, že se atribut alt do obrázku vloží, ale již se nenapíše samotný obsah altu. Prostě bude alternativní text prázdný, tudíž se namísto dekorativního obrázku nezobrazí nic, logicky. U dekorativních obrázků nikdy navypisujte obsah altu, protože není příliš dobré, když namísto úžasné a skvostné grafiky máte najednou text jako “modrý oblouk” nebo “dvě soustředné kružnice v gradiálním přechodu”. Prostě a jednoduše ho nechte prázdný: <img src=”obrazek.jpg” alt=”” width=”50” height=”50”>. Nejideálnější řešení je ovšem umisťovat dekorační obrázky přes kaskádové styly.

Prázdný alt? Co to je za blbost? Proč ho rovnou nevynechám?! Má to především dva důvody, a ani jeden z nich nespadá přímo do použitelnosti. První důvod je validita, chybějící alt u obrázků se považuje za chybu a stránka pak není validní. Druhý důvod spadá do přístupnosti. Pokud například chybí alternativní text, hlasová čtečka si s obrázkem poradí tak, že přečte jeho název, který mnohdy nevystihuje jeho podstatu. A i kdyby vystihoval - u dekoračních obrázků nemá čtečka přečíst nic, avšak i v těchto případech by přečetla název obrázku, takže zase špatně. Tudíž za této situace je jediná správná cesta prázdný alt.

Pokud je obrázek v okolním textu dobře popsán, není alt potřeba. K tomuto tvrzení bych přidal ještě jedno “pokud” - pokud si ten text uživatel přečte, což se mnohdy neděje. Právě obrázky mohou nalákat uživatele, aby si daný text přečetl, ne naopak - text nebude lákat k tomu, aby se uživatel podíval na obrázky. Právě proto si ten obrázek alt zaslouží, aby, i když se nezobrazil, mohl plnit alespoň poloviční funkci. I (ne)obyčejný alt může nalákat. Dále - uživatel má právo vědět, co na tom obrázku je, aniž by kvůli tomu musel číst sálodlouhé odstavce. Pokud by se obrázek zobrazil, také by nemusel číst půlku stránky aby pochopil, co na tom obrázku je.

Takže jak tedy má ten alternativní text vypadat? Nepište do altu dlouhé romány, uživatel si nebude za pomocí vaší půlstránkové recenze představovat jak vypadá vaše kočka. Stručně a jasně vyjádřete, co na obrázku je a případně co se tam děje. Takže pokud tedy máte na webu obrázek, jak vaše kočka Micinka honí u vás v obýváku nějakou myš, napište tam třeba tohle: Naše kočka Micinka chytá myš. Stručné - jasné - výstižné. Můžete pochopitelně upřesnit kde se tak děje a přidat “v obýváku”. U položek v menu pak stačí opsat to, co je na obrázku. Pokud máte odkaz “kontakty”, vepište do altu “kontakty”.

Aha, takže alternativní text je asi důležitý. Ano:-)