Poslepu.cz na novém URL

Od ledna 2014 najdete blog na adrese poslepu.cz.

neděle 10. února 2013

Alt="", nebo Alt="{mezera}"?

To, že mají mít obrázky alternativní textové popisky, je známá věc. Pokud je obrázek dekorativní, je vhodné nechat atribut alt prázdný. Ale opravdu prázdný, tzn. nedávat do něj ani mezeru.

Je to proto, že grafický prvek, jehož atribut alt je prázdný (neobsahuje žádný znak), odečítače obrazovky zcela ignorují (tzn. uživatel vůbec neví, že se na stránce takový grafický prvek vyskytuje). A to je přesně to, co v takovém případě potřebujeme.

Pokud bychom do atributu alt vložili mezeru, pak některé screen readery budou uživatele v takovém případě o tomto grafickém objektu informovat slovem grafika, které se standardně používá právě jako upozornění na grafický prvek. Což není v danou chvíli žádoucí a uživatele to může spíše mást, jelikož už nedostane informaci o tom, co že je to za grafiku.

Jednoduchá rada tedy zní - pokud chcete, aby screen reader grafický prvek ignoroval se vším všudy (což je v případě dekorativní grafiky ideální varianta), nechte atribut alt opravdu prázdný (alt="") a nedávejte do něj ani mezeru.

Příklady

  • <img src="foto.jpg" alt="Popisek fotky."> - v tomto případě screen reader uživateli řekne grafika a přečte obsah atributu alt.
  • <img src="foto.jpg" alt=" "> - v tomto případě screen reader informuje o přítomnosti obrázku slovem grafika.
  • <img src="foto.jpg" alt=""> - v tomto případě je grafický prvek screen readerem zcela ignorován.

Související odkazy

5 komentářů:

vitsoft řekl(a)...

Jak je to s atributem title z hlediska přístupnosti pro nevidomé?

Běžný prohlížeč jeho obsah zobrazuje po zaparkování kurzoru nad obrázkem v informační bublině, na rozdíl od obsahu atributu alt, který je vidět pouze při vypnuté grafice nebo po kratičkou chvilku, než se obrázek načte.

Radek Pavlíček řekl(a)...

Atribut title je z hlediska přístupnosti obecně problém, protože jeho obsah není přístupný poměrně hodně široké skupině uživatelů. Pěkný článek s názvem Using the HTML title attribute o tom napsal Steve Faulkner.

Jules řekl(a)...

Obrazky, ktore su sucastou dizajnu stranky by nemali NIKDY byt v img tagu - ide o semantiku kodu, ktora by mala byt dodrzana. Obrazok ma byt napriklad: div s nastavenym css backgroundom.

Pokial ide o obrazkovu galeriu, obrazky bez alt atributu by nemali existovat vobec.

V oboch pripadoch ide skor o zle programovanie, ako o techniku accessibility :)

Marian Kohn řekl(a)...

Citacka NVDA cita. JAWS cita bud jedno, alebo druhe. atributy alt aj title sucasne

Sovanet řekl(a)...

Osobně alt s obsahem používám u každého obrázku. A ty které jsou součástí grafiky, tak jsou v DIVu jako background.