Atribut alt elementu img

Hlavní metodou poskytování textové alternativy obrázkům stále je (a zřejmě ještě dlouho bude) atribut alt elementu img. Jeho obsah je v grafických prohlížečích uživateli zobrazen ve chvíli, kdy z nějakého důvodu (uživatel má vypnuto zobrazování obrázků či se obrázek nenačetl) není možné obrázek zobrazit. V tomto případě je textová alternativa také doplněna vizuálním upozorněním na to, že na daném místě měl být obrázek – například oblastí ohraničenou tečkovanou čárou či ikonou.

Asistivní technologie (screen readery či softwarové lupy s hlasovou podporou) zpravidla upozorní uživatele na přítomnost obrázku slovem “grafika” a přečtením obsahu atributu  alt.

Textové prohlížeče pak mohou zobrazit obsah atributu alt v závorkách, jinou barvou či jako odkaz na obrázek nebo jako text s upozorněním či bez upozornění na to, že se jedná o zástupný text obrázku.

Jaké jsou výhody a nevýhody tohoto řešení?

Výhody

• Robustní podpora ve většině grafických i textových prohlížečích a asistivních technologiích.
• Textová alternativa je explicitně svázána s obrázkem, který zastupuje.
• Použití atributu alt nemá vliv na vizuální podobu obsahu.

Nevýhody

• Obsah atributu alt není snadno dostupný pro některé uživatele, pro něž může být užitečný.
• Příliš dlouhý obsah atributu alt může způsobit problémy v některých prohlížečích či asistivních technologiích.
• Obsah atributu alt nelze sémanticky strukturovat.

Je obsah atributu alt náhradou obrázku?

Odpověď na tuto otázku záleží na tom, co je na obrázku, a také kontextu, v němž je obrázek použit. Ukažme si aspoň některé možné příklady:

• Pokud obrázek slouží jako odkaz a neexistuje k němu jiná alternativa, pak musí obsah atributu alt popisovat cíl, na které odkaz vede.
• Pokud je obsahem obrázku (kratší) text, pak obsah atributu alt lze považovat za plnohodnotnou náhradu obrázku, a proto by měl obsahovat to, co obrázek.
• Pokud ale je obrázek tak informačně bohatý, že je jeho textová alternativa na použití v atributu alt příliš dlouhá, měl by atribut alt obsahovat pouze stručný popis obrázku, doprovozený detailnější textovou alternativou, která je k obrázku přiřazena tak, že ji lze programově určit (například pomocí  aria-describedby).

Kdy použít prázdný atribut alt?

V mnoha případech je lepší ponechat atribut alt prázdný. Může se jednat například o následující situace:

• Obrázek má čistě dekorativní funkci.
• Obrázek nemá být viditelný pro žádného uživatele.
• Obrázek obsahuje text, který už je zobrazen jinde na stránce v textové podobě, nebo grafický symbol, jehož význam je popsán před nebo za obrázkem.
• Obrázek je součástí skupiny několika obrázků, které tvoří jeden velký obrázek a jednomu obrázku z této skupiny je přiřazena textová alternativa, která zastupuje celý velký obrázek.
• Obrázek je součástí odkazu, jehož text již dostatečně popisuje cíl, na který odkaz vede.

Jak dlouhá by měla být textová alternativa obrázku?

Odpověď na tuto otázku velmi záleží na kontextu, v němž je obrázek použit. Protože neexistuje nic jako “správná” nebo “špatná” délka textové alternativy pro atribut alt nebo element figcaption, obecně je za dlouhou textovou alternativu považován text delší než 75 až 100 znaků (tj. jedna až dvě věty). Takový by neměl být obsahem atributu alt nebo elementu  figcaption.

Elementy figure a figcaption

Elementy figure a figcaption poskytují nástroje k explicitnímu přiřazení popisu k různorodému obsahu, který může obsahovat i obrázek. Jakýkoliv obsah, který je uvnitř elementu figure a není současně obsahem elementu figcaption, je “popsán” právě obsahem elementu figcaption. Obsah elementu figcaption může doplňovat obsahu atributu  alt.

Jejich nevýhoda spočívá zatím v nedostatečné podpoře na straně prohlížečů. Proto je vhodné je kombinovat s atributem alt u elementu img, případně atributem  aria-describedby.

aria-describedby

Podobně lze k přiřazení textového popisu, který už je někde na stránce obsažen, také použít atribut aria-describedby. Ten je už dnes asistivními technologiemi podporován a můžeme jej tedy bez obav použít i se současnými řešeními.

Obě techniky jsme si podrobně popsali v článku Přístupnost HTML5: Textové alternativy obrázků (2/2) – praxe v části Figure a figcaption, aria-describedby.

Jedno z řešení může vypadat například takto:

<figure>
<img src=”obrazek.jpg” alt=”Stručný popisek toho, co je na obrázku.” aria-describedby=”popisek1”>
<figcaption>Titulek obrázku.</figcaption>
</figure>

…

<p id=”popisek1”>Text, detailněji popisující obrázek.</p>

A co atribut title?

Ačkoliv by se mohlo v některých situacích jevit jako vhodné použít k definici textové alternativy atribut title, není tomu tak. I přesto, že je zde již nějakých 13 let, nemá stále v některých stěžejních věcech na straně prohlížečů a asistivních technologií dostatečnou podporu. Přístupnost obsahu atributu title tedy padá se slabou podporou na straně prohlížečů, asistivních technologií a způsobem, jakými je poměrně často autory obsahu webu používán.

Mezi uživatele, kteří se k obsahu atributu title nedostanou, například patří:

• uživatelé mobilních zařízení,
• uživatelé, kteří pracují s webem pouze pomocí klávesnice,
• uživatelé asistivních technologií.

Proto jej v praxi pro běžné používání spíše nedoporučuji. Další informace včetně příkladů vhodného a nevhodného použití atributu title najdete v článku Using the HTML atribute title od Steva Faulknera.

Závěr

Dnešní článek je volným překladem textu Methods for Providing Text Alternatives, který je součástí dokumentu HTML5: Techniques for providing useful text alternatives, doplněný o vlastní praktické zkušenosti. V něm také najdete v případě zájmu o tuto tématiku více informací. Tímto článkem současně tématiku textových alternativ k obrázkům uzavíráme. Příště se podíváme na některou z dalších oblastí tvorby přístupného webu, HTML5 a WAI-ARIA.