Aby byl web opravdu přístupný, nestačí jen to, že každý <img> má atribut alt. Prázdný alt sice zajistí, že stránka bude validní, ale rozhodně tím nemáš vyhráno. Naopak – nevhodný nebo nesmyslný text v alt popisku může uživatelům se čtečkou obrazovky spíš uškodit než pomoct.
K čemu slouží atribut ALT
ALT (alternativní) text je krátký popis obrázku nebo jiného netextového obsahu, který využívají hlavně čtečky obrazovky. Díky němu si návštěvník dokáže udělat představu, co je na obrázku, i když ho nevidí. Nestačí ale jen „něco“ napsat do alt a mít hotovo. Vždy se zamysli nad tím, v jakém kontextu obrázek je a k čemu na stránce slouží.
Specifikace WCAG 2.1 říká, že každý netextový obsah na webu musí mít textovou alternativu. Spadá to do úrovně A, tedy povinné pro všechny.
Kdy psát alternativní text
Než začneš řešit, kde alt psát a kde ne, ujasni si účel konkrétního obrázku. Níže jsou typy obrázků podle doporučení WAI (Web Accessibility Initiative).
Informační obrázky
Informační obrázky něco sdělují — typicky fotky nebo ilustrace. Do alt napiš stručný smysl toho, co obrázek znázorňuje.
U ikon bez jiného textu na stránce popiš jejich účel.
<img src="phone.png" alt="Telefon:">
<a href="tel:01234567890">0123 456 7890</a>
<img src="email.png" alt="E-mail:">
<a href="mailto:web@pristupne.cz">web@pristupne.cz</a>Dekorativní obrázky
Tyhle obrázky jen dotvářejí vzhled. Obsah stránky funguje i bez nich. Dej jim prázdný alt, aby je čtečky přeskočily — pro uživatele čteček by jen rušily.
Typicky jde o obrázky v hero banneru, pozadí, různé gradienty, vzory nebo dekorativní animace.
<img src="bg.png" alt="">Funkční obrázky
Když obrázek funguje jako odkaz nebo tlačítko, alt má popsat akci po kliknutí, ne to, co je na obrázku.
Třeba u loga v záhlaví bude alt „Přejít na hlavní stránku“, ne „Logo společnosti XY“.
<a href="/"><img src="logo.png" alt="Přejít na hlavní stránku"></a>Pokud je hned vedle funkčního obrázku text se stejným významem, nech alt prázdný. Například ikona u odkazu, který už obsahuje srozumitelný text cíle, alt nepotřebuje. Stejně tak dlaždice článku s obrázkem a nadpisem — aby čtečka nečetla to samé dvakrát.
Obrázky obsahující text
Ideálně na web nedávej obrázky s textem. Vždy je lepší použít skutečný text v HTML — je čitelnější pro čtečky a při zvětšení se nedeformuje.
Když přesto text v obrázku máš, napiš do alt stejný text, jaký je v obrázku.
<img src="kontakt.png" alt="Kontakt">Složité obrázky
U grafů, map nebo komplexních tabulek je nejlepší dát data v textové podobě. Když to nejde, popiš důležité informace v okolním textu nebo v popisku pod obrázkem. Samotný obrázek pak bude mít krátký alt, který řekne, co to je, a kde je k dispozici podrobný popis. Hodí se použít <figure> a <figcaption>.
<figure role="group">
<img
src="graf.png"
alt="Sloupcový graf měsíční a celkové návštěvnosti za 1. čtvrtletí 2024 pro stránky 1 až 3.">
<figcaption>
<a href="graf-2024.html">Textový popis grafu návštěvnosti Example.com od ledna do března 2024.</a>
</figcaption>
</figure>Můžeš také přidat delší skrytý popis jen pro čtečky obrazovky, pokud se to hodí.
Skupiny obrázků
Když víc obrázků dohromady sděluje jednu informaci, dej plný popis jen prvnímu a ostatní nech s prázdným alt.
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 u obrázkové mapy má popsat kontext všech odkazů. Každé <area> má mít vlastní alt s účelem nebo cílem odkazu.
<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
Alt by měl být krátký a věcný. Ideálně kolem 150 znaků. Pokud potřebuješ víc, zvaž, jestli není lepší popsat důležité informace přímo v textu stránky.
Na konec dej tečku — čtečka po ní udělá krátkou pauzu.
Nepiš do popisku slova jako „Obrázek“ nebo „Fotka“. Čtečka už sama řekne, že jde o obrázek, a opakoval bys informaci navíc.
Neduplikuj obsah. Když by se v alt opakoval stejný text jako v nadpisu nebo popisku vedle, uživatel ho uslyší dvakrát a bude to zbytečně zdržovat.
Vždy použij atribut alt="", i kdyby měl být prázdný. Když chybí úplně, některé čtečky přečtou název souboru.
Je-li alt delší, dej to nejdůležitější na začátek, aby uživatel hned věděl, jestli má smysl poslouchat dál.
Na vícejazyčném webu přelož i alt popisky — drž je ve stejném jazyce jako okolní obsah.