Přejít k navigační liště

Zdroják » Webdesign » Přístupnost HTML5: textové alternativy obrázků (1/2) – teorie

Přístupnost HTML5: textové alternativy obrázků (1/2) – teorie

Články Webdesign

Poskytnutí relevantní textové alternativy je jeden ze základních kamenů přístupnosti. I tak na první pohled jednoduchá věc, jako je přidání atributu alt k obrázku, však může skrývat mnohá úskalí. Dnes se na toto téma podíváme spíše v rovině obecné.

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.

Komentáře

Subscribe
Upozornit na
guest
18 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
tdvorak

Díky za článek. Jen bych doplnil, že když dáte obrázkům dobrý alt, pravděpodobně vám vzroste i návštěvnost z vyhledávačů obrázků (images.google.com například).

Junior

Pekny clanok!

Pre nevidiacich sa este pouziva atribut longdesc, ktory moze obsahovat URL pre rozsireny popis konkretneho obrazka.
Len skoda ze v HTML5 to vyhodili (podla http://www.w3schools.com/tags/tag_img.asp)
Citacie programy JAWS a NVDA to bez problemov vedia pouzit…

Logika

Přiznám se, že moc nechápu logiku čteček, že pokud není přítomný atribut alt, čtečka přečte název souboru, a pokud chci jenom dekorační obrázek, musím napsat alt=““. Logika by velela, že pokud atribut alt není uveden, čtečka by obrázek nezmiňovala.

Na druhou stranu, u stránek generovaných skriptovacím jazykem nevidím problém ve vytváření speciální verze stránek optimalizované pro čtečky.

Michal.Jungmann

> Logika by velela, že pokud atribut alt není uveden, čtečka
> by obrázek nezmiňovala.

Šedá je teorie a zelený strom života. :-) V praxi (zatím?) absence Alt tagu většinou znamená, že autor stránky je ignorant, nikoliv že obrázek popisek nepotřebuje, proto holt musí všichni autoři-neignoranti u nevýznamových obrázků doplňovat Alt=““…

> Na druhou stranu, u stránek generovaných skriptovacím jazykem
> nevidím problém ve vytváření speciální verze stránek optimalizované
> pro čtečky.

Tuto cestu již mnozí zkoušeli a obecně se ukázala býti nevhodnou. I pokud stránky mají alternativní verzi, která je funkční a aktuální (což překvapivě vůbec není samozřejmé), zrakově postižení stejně většinou používají primární verzi. Radek možná doplní odkaz na články, kde je tato problematika podrobně rozebírána, nicméně empirická zkušenost je taková, že přístupnosti více prospějí jednoduché drobné změny stávající (základní) webové prezentace než náročná tvorba speciálních verzí…

Pilda

Dobrý den, hezký článek. Moc se mi ale nezdá ta rada „Definovat obrázku textovou alternativu, která je stejná jako text hned vedle fotky, je nadbytečné.“ Jak má uživatel vědět, že ten alternativní text jste tam nenapsal proto, že odstavec normálního textů popisuje to co je na obrázku? To přeci nemůže vědět. Bude si říkat „co je asi na tom obrázku?“, nebo „autor zapomněl dopsat alternativní popis a já teď nevím co na něm je“. Pokud budete mít u 20 obrázků vyplněný alt a u 1 ne, tak uživatel opravdu nemá šanci zjistit, že jste ho nedoplnil, protože je „zbytečný.“

Kit

nepatří do HTML, ale do CSS. Takovému obrázku není nutné dávat žádný atribut alt.

Martin Hassman

To je teoretická poučka, ovšem nikoliv univerzální řešení. Jedním z případů je tvorba obsahu přes nějaké CMS, ve kterém se obrázek bude vkládat do HTML jako obrázek, ať už má dekorační účel či nikoliv. A pak je třeba řešit otázku altu vzhledem k této situaci (což je řešeno v článku).

Kit

Souhlasím, tento speciální případ je v článku řešen. Ovšem běžný případ dekorativní grafiky, která patří do CSS, autor článku neřeší vůbec.

Honza

Díky za článek. Z hlediska přístupnosti a optimalizace pro vyhledávače je lepší jaká varianta?

– <h1>Můj web</h1>
nebo
– <h1><img src=“logo.jpg“ alt=“Můj web“ /></h1>

Děkuji za odpověď,
Honza

Mintaka

Asi spíš varianta C:

<h1>Můj web</h1><img src=“logo.jpg“ alt=“Logo mého webu“ />

A CSSkem si ošetřit aby to vypadalo podle chuti.

petr_p

Tento zápis je sémanticky špatně, protože vytváří dva nezávislé prvky, z kterých vůbec není zřejmé, že se jedná o alternativy. Za nejčistší bych považoval zápis:

<h1>
  <object type="image/jpeg" data="logo.jpg">
    <object type="text/plain">Můj web</object>
  </object>
</h1>

Leč normotvůrci ještě nedocenili modularitu ve stylu XHTML2.

Rovněž jednotným řešením by bylo nahradit text i bitmapu jediným SVG s textem vyvedeným jako text nikoliv jako křivky. Avšak implementace prohlížečů a zpřístupňovacích technologií se nám nějak zapomněly v době bitmapové.

Franta

+1

Akorát místo toho vnořeného objektu by stačil obyčejný odstavec.

Mintaka

Re. Dva nezávislé prvky, z kterých vůbec není zřejmé, že se jedná o alternativy:

Název webu a jeho logo je jedna a ta samá věc?
Asi jsem zaspal dobu, já je vnímám samostatně.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.