Pravidla, jak správně používat alternativní text u obrázků

Nesprávné použití atributu ALT (Alternativního textu) u obrázků je stále velmi častou chybou. Zkuste si to sami. Vypněte si na webu obrázky a čtěte. Nebo ještě lépe – nechte si stránku přečíst od někoho jiného. Dává vám smysl?

Jak tedy ALT u obrázku použít? Vždy záleží na kontextu.

• atribut ALT musí vždy existovat
• ALT by neměl nikdy obsahovat název souboru
• obrázek je čistě dekorativní – ALT="", je tedy prázdný a čtečka bude tento obrázek ignorovat
• obrázek (např. ikona) nahrazuje text – ALT obsahuje tento text, např. <img src"mail-icon.png" alt="E-mail:"/>
• obrázek má informační hodnotu sám o sobě – ALT obsahuje popis toho, co na obrázku je v kontextu článku, ve kterém je použit
• pokud je na obrázku odkaz, mohou nastat různé kombinace:
  • v odkazu je pouze obrázek a žádný další text – v ALT musí být uveden smysluplný text popisující odkaz (ne vlastní URL). V případě, že tag <a> obsahuje atribut TITLE, může být podle některých zdrojů ALT obrázku prázdný – více informací je např. na webu konsorcia W3C (anglicky).
  • v odkazu je obrázek i další text – ALT může být prázdný, nebo obsahuje popis toho, co na obrázku je. Častým jevem je, že jsou za sebou dva stejné odkazy, jednou na obrázku, podruhé na textu. To vytváří duplicitu, která je v rozporu s kritéri 1.1.1, 2.4.4 a 2.4.9.

Pravidla jsou jednoduchá. Tak proč se to dělá špatně? Protože je to spousta práce, která se nedá dost dobře zautomatizovat.

Další informace o použití ALT u obrázků

Článek Accessibility: Images, “Alt” tags, and the “Out Loud” Experience (anglicky) podrobně rozepisuje všechny možnosti včetně toho, jak je interpretují různé hlasové čtečky.

Problematika je velmi dobře popsána také na serveru WebAIM.org (anglicky). V článku je stejný obrázek prezidenta Washingtona zasazen do různého kontextu.