Aby byla webová stránka validní, musí každý img element obsahovat atribut ALT. Často se v tomto atributu nechává prázdný text, což sice zajistí validitu stránky, ale rozhodně nezaručí její přístupnost. V některých případech mohou nevhodné texty v ALT popiscích dokonce i škodit.
K čemu slouží atribut ALT
ALT (alternativní) text je krátký textový popis obrázku či jiného netextového obsahu, který využívají zejména čtečky obrazovky. Návštěvníci webu by tak měli zjistit, co je na obrázku zobrazeno, aniž by ho viděli. Pro správně přístupný a použitelný web však nestačí pouze slovně popsat obrázek (např. „manažeři podávající si ruku"). Je potřeba se zamyslet nad tím, jaký je kontext obrázku a k čemu slouží.
Podle specifikace WCAG 2.1 musí každý netextový obsah na webu mít svou textovou variantu. Jedná se o pravidlo z kategorie A, tedy povinné pro všechny.
Kdy psát alternativní text
Předtím, než si určíme, u kterých obrázků ALT popisky psát a u kterých ne, je potřeba se zamyslet nad jejich účelem. Níže si popíšeme různé typy obrázků podle toho, jak jespecifikuje WAI (Web Accessibility Initiative).
Informační obrázky
Informační obrázky zobrazují určité koncepty nebo informace. Nejčastěji se jedná o fotografie či ilustrace. Textový popisek by měl obsahovat alespoň stručný popis myšlenky, kterou obrázek znázorňuje.
Pokud se jedná o ikonu, která znázorňuje důležitý prvek bez textového popisu jinde na stránce, popíšeme účel ikony.
<img src="phone.png" alt="Telefon:">
<a href="tel:01234567890">0123 456 7890</a>
<img src="email.png" alt="Email:">
<a href="mailto:web@pristupne.cz">web@pristupne.cz</a>Dekorativní obrázky
Tyto obrázky slouží pouze k dekoračním účelům, případně k doplnění vizuální stránky webu. Samotný obsah webu funguje i bez těchto obrázků. Textový popisek by u nich měl být prázdný, aby je čtečky obsahu ignorovaly. Pro uživatele čteček totiž obsah takového obrázku nemá žádný význam, naopak jim může ztížit cestu k cíli.
Jedná se například o obrázky v hero banneru, ikony, grafiku na pozadí, různé gradienty či animace.
<img src="bg.png" alt="">Funkční obrázky
Pokud obrázek slouží jako proklik, měl by alternativní text popisovat akci, která se po kliknutí vykoná, a ne to, co je na obrázku znázorněno.
Například u loga v záhlaví stránek bude alt popisek „Přejít na hlavní stránku", a nikoliv „Logo společnosti XY".
<a href="/"><img src="logo.png" alt="Přejít na hlavní stránku"></a>Pokud je však vedle funkčního obrázku textový popisek se stejným obsahem, necháme ALT prázdný. Například pokud máme vedle odkazu obrázek ikony, a samotný odkaz obsahuje text s popiskem toho, kam odkaz vede, je ALT u obrázku nadbytečný. Stejně tak pokud máme výpis článků obsahující dlaždici s obrázkem a nadpisem, kde proklik vede na detail článku. Uživatel by totiž slyšel daný popis přečtený 2x (jednou v ALTu, podruhé v nadpisu / textu odkazu).
Obrázky obsahující text
V ideálním případě by na webu neměly být žádné obrázky, které obsahují text. Vždy je lepší použít přímo text na stránce. Ten je lépe čitelný pro čtečky obsahu a zároveň nedochází k jeho deformaci či pixelaci při zvětšení stránky.
Pokud však na webu nějaký text v obrázku máme, měl by ALT popisek obsahovat stejný text, jaký je v obrázku.
<img src="kontakt.png" alt="Kontakt">Složité obrázky
Pokud obrázek znázorňuje složitý graf nebo tabulku, je vždy lepší místo obrázku uvést textovou variantu. Není-li to možné, doporučuje se data z obrázku popsat v okolním textu či ve formě popisku pod obrázkem. Samotný obrázek pak bude obsahovat krátký ALT, který krátce popíše obrázek a zmíní, kde na webu je podrobný popis dat z obrázku. Rovněž je možné pod obrázek vložit odkaz na delší text popisující celý graf. K tomu je vhodné použít HTML5 elementy <figure> a <figcaption>.
<figure role="group">
<img
src="graf.png"
alt="Sloupcový graf zobrazující měsíční a celkovou návštěvnost za první čtvrtletí roku 2024 pro stránky 1 až 3.">
<figcaption>
<a href="graf-2024.html">Textový popis sloupcového grafu návštěvnosti stránek Example.com od ledna do března 2024:</a>
</figcaption>
</figure>Také je možné uvést delší textový popisek a skrýt ho pro uživatele, který čtečku obrazovky nevyužívají.
Skupiny obrázků
Pokud skupina obrázků znázorňuje stejnou informaci, měl by ALT text u prvního obrázku popisovat celou skupinu. Ostatní obrázky ve skupině pak budou mít ALT prázdný.
Hodnocení:
<img src="star-full.jpg" alt="3.5 z 5 hvězdiček">
<img src="star-full.jpg" alt="">
<img src="star-full.jpg" alt="">
<img src="star-half.jpg" alt="">
<img src="star-empty.jpg" alt="">Obrázkové mapy
Textová alternativa obrázkové mapy by měla popisovat kontext všech obsažených odkazů. Každý odkaz by pak navíc měl mít alternativní text popisující účel daného odkazu či jeho cíl.
<img src="orgchart.png"
alt="Představenstvo a související zaměstnanci:"
usemap="#Mapa">
<map id="Mapa" name="Mapa">
<area shape="rect"
coords="176,14,323,58"
href="[…]"
alt="Davy Jones: Předseda představenstva">
[…]
<area shape="rect"
coords="6,138,155,182"
href="[…]"
alt="Harry H Brown: Ředitel marketingu (podřízen předsedovi)">
[…]
</map>Jak psát alternativní text
Alternativní text popisující netextový obsah na stránce by měl být krátký. Ideální délka je kolem 150 znaků. Pokud potřebujete napsat popisek delší, zvažte, zda není přínosnější upravit obsah stránky tak, aby bylo vše důležité popsáno přímo v textu.
Na konci ALT textu napište tečku. Zaručí to, že čtečka po jeho přečtení udělá pauzu.
Nevpisujte do popisků slova jako „Obrázek" nebo „Fotka". Čtečka obrazovky již sama oznamuje, že se jedná o obrázek, a proto není potřeba tuto informaci opakovat.
Neopakujte obsah. Pokud je v ALT popisku použit stejný text jako v nadpisu či textu poblíž obrázku, uživatel uslyší tentýž text vícekrát. To vede ke zdržování na cestě k cíli a může uživatele zmást.
Vždy vkládejte atribut alt="", i kdyby měl být prázdný. Pokud atribut ALT chybí úplně, mohou některé čtečky přečíst název souboru.
Pokud je ALT text delší, vypište to nejdůležitější hned na začátku. Uživatel pak bude vědět, jestli pro něj má smysl poslouchat celý text, nebo může přeskočit na další prvek.
Pokud máte vícejazyčný web, je nutné přeložit ALT popisky do všech jazyků.