I přesto, že web je primárně vizuální médium, mohou s ním díky jeho univerzálnosti pracovat i uživatelé, kteří z nějakého důvodu nemohou vnímat jeho grafickou podobu. Patří sem například nevidomí uživatelé, kteří pro práci s webem používají screen reader, uživatelé, kteří mají vypnuto zobrazování obrázků kvůli pomalému připojení k Internetu nebo datovému limitu či uživatelé, kterým se obrázky nezobrazí kvůli technickým problémům (například proto, že odkaz vede na neexistující soubor).

Správné zpřístupnění obrázků je proto jedna z prvních věcí, kterou by se měl každý webdeveloper naučit a potom ji také v praxi uplatňovat. Definování textové alternativy k obrázkům je poměrně jednoduché a po technické stránce k tomu není třeba mít nějaké speciální dovednosti. Stejně snadno ale můžeme při vytváření textových alternativ vytvářet (byť nevědomky) bariéry, které mohou uživatelům práci s webem spíš komplikovat než usnadňovat.

Několik obecných rad na úvod

• Textová alternativa by měla mít stejnou informační hodnotu jako obrázek.
• Pokud má obrázek nějakou funkci (slouží například jako tlačítko nebo odkaz), pak by textová alternativa měla popisovat tuto funkci spíše než to, co je na obrázku.
• Textovou alternativu definujme maximálně stručně, ale stále tak, aby opravdu byla textovou alternativou daného obrázku a obsahovala vše podstatné. Krátké texty popisující účel obrázku jsou zpravidla dostačující.
• Stejný obrázek může mít v různých situacích naprosto odlišnou textovou alternativu.
• Textovou alternativu nedefinujme tam, kde to není potřeba. Definovat obrázku textovou alternativu, která je stejná jako text hned vedle fotky, je nadbytečné.

Atribut alt

Atribut alt  u elementu img  je pravděpodobně nejčastější způsob, jakým budeme textovou alternativu definovat. Kód může vypadat například takto:

<img src="obrazek.jpg" alt="Text, nesoucí stejnou významovou informaci jako obrázek, který zastupuje." />

Kdy a jaký alt obrázku přiřadit?

• Slouží obrázek jako odkaz či tlačítko a jedná se o jediný obsah těchto prvků?
  • Ano: v atributu alt  popište cíl odkazu nebo akci, která se po potvrzení tlačítka provede.
  • Ne: pokračujte dál.
• Obsahuje obrázek text?
  • Ano:
    • pokud je text z obrázku k dispozici také jako skutečný text někde blízko obrázku, nechte atribut alt prázdný.
    • v opačném případě do atributu alt zapište text, který významově odpovídá textu z obrázku.
  • Ne: pokračujte dál.
• Rozšiřuje či doplňuje obrázek stávající obsah na stránce?
  • Ano a jedná se o jednoduchou grafiku nebo fotografii: atribut alt  by měl obsahovat stručný popis toho, co je na obrázku.
  • Ano a jedná se o graf nebo nějakou jinou komplikovanou grafiku: textovou alternativu umístěte někam na stránku a v atributu alt jen stručně popište, jaký je význam konkrétní grafiky.
  • Ne: pokračujte dál.
• Má obrázek pouze dekorační účel a nenese žádnou informaci pro uživatele?
  • Atribut alt ponechejte prázdný.
• Nic z výše uvedeného.
  • Tento rozhodovací strom určitě nepokrývá všechny možné situace, další možná řešení si ukážeme na praktických příkladech.

Jak screen reader zpřístupňuje obsah atributu alt?

Pokud se uživatel pracující se screen readerem přemístí na grafický prvek, screen reader ho o této skutečnosti informuje slovem grafika a přečtením obsahu alternativního textového popisku (pokud existuje). Z toho vyplývá, že obecnou informaci o tom, že se jedná o grafický prvek, není nutné do alternativní popisku zahrnovat, screen reader ji obstará ve vlastní režii.

Pokud grafický prvek nemá atribut alt  definován, může (ale nemusí, záleží na jeho možnostech a nastavení) screen reader hledat atribut title  a v takovém případě přečíst jeho obsah.

Pokud není k dispozici ani atribut alt, ani title, hledá screen reader nějakou další pomocnou informaci, kterou by mohl uživateli sdělit a tím mu umožnit vytvořit si představu o tom, co je na obrázku. V případě grafických prvků, které slouží jako odkazy, to může být například název zdrojového souboru, který slouží jako grafický odkaz, či adresa odkazu, na kterou se po potvrzení odkazu dostanete.

Například pokud použijete jako tlačítko obrázek, který nemá definován ani alt, ani title, ale jeho název je tlacitko.jpg (nebo například prihlaseni.jpg), pak i přesto, že obrázek nemá žádný alt  ani title, je screen reader schopen uživateli díky názvu tlačítka předat relevantní informaci.

Na výše uvedené se ale samozřejmě nelze spoléhat (navíc málokdy mají obrázky smysluplné názvy), takže stále platí, že definovat relevantní textovou alternativu prostřednictvím atributu alt  (či v některých specifických případech jiným způsobem) je nejlepší cesta. A pokud má zdrojový soubor grafického prvku definován srozumitelný název, určitě to je ku prospěchu věci.

Co a jak popisovat

Tak jako v jiných oblastech tvorby webu, ani při definování textových alternativ neexistuje jediné správné řešení a jediná cesta. Jedna z otázek, kterou si webdevelopeři a další správci obsahu při vytváření textových alternativ kladou, je “Co a jak bych měl popsat?” Je nutné přiznat, že odpověď na tuto otázku není jednoduchá. Zatímco někteří uživatelé vyžadují detailní popis každého grafického prvku, jiní preferují stručný popis jen těch prvků, které jsou opravdu důležité. Navíc, mnoho uživatelů přichází na web udělat konkrétní úkon (například přečíst si článek či koupit zboží) a ne zkoumat, jaké textové alternativy mají jednotlivé grafické prvky. Pokud jsou jejich popisky dostačující k tomu, aby uživatelé to, proč na stránku přišli, bez problémů udělali, pak je délka či forma popisků zpravidla nezajímá.

S jakými typy grafických prvků se můžeme na stránkách setkat?

• Obrázky, jejichž cílem je poskytnout vizuální zážitek: sem patří například fotografie, kresby či malby.
• Grafy a diagramy: Tyto grafické prvky mohou být informačně velmi bohaté, nebo mohou znázorňovat různé vazby mezi jednotlivými typy dat.
• Text ve formě obrázku
• Obrázek, který plní nějakou funkci: zpravidla se jedná grafické prvky, které slouží jako odkazy nebo tlačítka.
• Dekorativní grafika: Obrázek, který nemá žádnou informační hodnotu a slouží pouze jako dekorace.
• Ikona: obrázek, který je použit jako vizuální nápověda například u odkazů.

Závěr

Dnes jsme se podrobně seznámili s tím, jaké možnosti při definování textových alternativ máme. Jak vytvořit relevantní textovou alternativu prakticky si ukážeme příště. Zájemcům o detailnější seznámení s touto tématikou doporučuji stránku HTML5: Techniques for providing useful text alternatives a knihu Pro HTML5 Accessibility, z nichž jsem čerpal i při přípravě tohoto článku.