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é.
Jestli jste někdy řešili nasazování aplikace, asi víte, že všechno odladit může být celkem zdlouhavá záležitost. Dokážete si představit, že na to máte jen týden? Že je to nemožné? Není! Jde to a ani to nemusí být příliš složité.
Reportáž z virtuální konference FOSDEM. Minule jsem popsali Go room, dnes se věnujeme monitoringu a observability.
Mikrofrontendy jsou zajímavá adaptace konceptu microservices pro potřeby frontendového vývoje. Podívejte se, co to v praxi obnáší a proč jsme se v Seznam.cz rozhodli vyvinout náš vlastní microfrontend framework, Merkur.
Přístupnost - SEO
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).
Re: Přístupnost - SEO
Díky za doplnění. Důvodů, proč definovat k obrázkům textové alternativy, je celá řada, a v tom díle jsem je určitě nevyjmenoval všechny.
longdesc
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…
Re: longdesc
To je pravda. Na druhou stranu je ale fakt, že se tento atribut moc nevyužíval. HTML5 naštěstí místo něj nabízí jiné možnosti, jak obrázek detailněji popsat. Ukážeme si je v dalším díle.
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.
Re: Logika
To, do jaké míry mají asistivní technologie napravovat chyby tvůrců webů, byla – a určitě ještě bude – otázka mnoha diskusí. Před časem jsem o tom psal i zde na Zdrojáku v článku Mají asistivní technologie napravovat chyby webdeveloperů?
Jinak toto chování vychází z toho, že je lepší uživateli poskytnout v případě, kdy atribut alt je prázdný a obrázek slouží jako odkaz či tlačítko, aspoň nějakou informaci. Z logiky věci se nabízí adresa, na kterou odkaz vede, a název souboru.
Toto chování ale samozřejmě není jediné možné a můžete si nastavit, jak se má screen reader ke grafice chovat. I volba, kterou zmiňuje, tj. aby Vám screen reader hlásil jen grafiku s popisky, je možná.
Re: Logika
> 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í…
A ví to i BFU?
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ý.“
Re: A ví to i BFU?
Dobrý den,
díky za komentář. To, jak uživatele upozornit na to, že text a obrázek k sobě patří, si ukážeme v příštím díle, který bude zaměřen právě na praktické příklady a návrhy možných řešení konkrétních situací.
Obrázek, který má jen dekorační účel
nepatří do HTML, ale do CSS. Takovému obrázku není nutné dávat žádný atribut alt.
Re: Obrázek, který má jen dekorační účel
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).
Re: Obrázek, který má jen dekorační účel
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.
Re: Obrázek, který má jen dekorační účel
Ačkoliv se článek primárně věnuje definování textové alternativy grafice vkládané přímo do kódu, souhlasím s Vámi, že pro úplnost jsem tam tuto možnost mohl zmínit. Děkuji za doplnění.
Obrázek jako nadpis
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
Re: Obrázek jako nadpis
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.
Re: Obrázek jako nadpis
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é.
Re: Obrázek jako nadpis
+1
Akorát místo toho vnořeného objektu by stačil obyčejný odstavec.
Re: Obrázek jako nadpis
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ě.