Jak psát dobré alt texty k obrázkům

K čemu alt text slouží

Alt text je textová alternativa obrázku, zapsaná v atributu alt. Čtečky obrazovky ho čtou nahlas, braillské řádky ho zobrazují a prohlížeč ho ukáže, když se obrázek nenačte. Mohou ho využít i vyhledávače. Webový standard pro přístupnost, WCAG, požaduje textovou alternativu, která plní stejnou úlohu jako obrázek (kritérium úspěšnosti 1.1.1, úroveň A).

Klíčová myšlenka: alt text není popisek pod obrázkem ani popis obrázku samoúčelně. Říká, co obrázek stránce přidává. Stejná fotografie může na dvou stránkách potřebovat jiný alt text, nebo žádný.

Čtyři druhy obrázků

• Informativní obrázky přidávají význam: fotografie, ikona vedle telefonního čísla, diagram. Napiš krátký alt text, který tento význam předá.
• Funkční obrázky jsou uvnitř odkazů a tlačítek. Alt text jmenuje akci nebo cíl, ne obrázek: „Hledat“ u lupy, „Vytisknout tuto stránku“ u ikony tiskárny.
• Dekorativní obrázky nic nepřidávají: okraj, mezera, ozdoba nebo obrázek, který jen opakuje text vedle sebe. Dej jim prázdný atribut alt (alt=""), aby je čtečky obrazovky přeskočily, nebo je dej do stylů jako pozadí.
• Obrázky textu jsou poslední možnost. Pokud ho potřebuješ, alt text opakuje slova v obrázku. Logo, které není odkazem, dostane název organizace.

Jak napsat dobrý alt text

1. 1Zeptej se, proč je obrázek na stránce. Co by návštěvníkovi chybělo, kdyby tam nebyl?
2. 2Napiš, co je pro tento účel důležité, frází nebo jednou větou.
3. 3Začni obsahem. Čtečka obrazovky obvykle oznámí, že jde o obrázek, takže „obrázek …“ nebo „fotka …“ málokdy pomůže.
4. 4Neopakuj, co už říká text vedle obrázku. Pokud říká všechno, je obrázek dekorativní a dostane prázdný alt.
5. 5Přečti alt text nahlas, aniž by ses díval na stránku. Dává smysl sám o sobě?

Časté chyby

• Žádný atribut alt. Některé čtečky obrazovky pak přečtou název souboru.
• Název souboru nebo kód jako alt text, například „IMG_2041.jpg“.
• Stejný řetězec klíčových slov u mnoha obrázků. Alt text je především pro lidi.
• Dlouhý popis čistě dekorativního obrázku.
• Popis vzhledu obrázkového tlačítka místo jeho akce. Tlačítko hledání není „lupa“, je to „Hledat“.

Jak dlouhý by měl být?

WCAG 1.1.1 neuvádí žádný počet znaků. Rada W3C zní držet ho krátký, ideálně frázi nebo větu. U grafů a jiných složitých obrázků uveď úplné informace jako text na stránce a alt text drž krátký. Pokud potřebuješ víc než větu, obrázek pravděpodobně nese obsah, který patří do textu stránky.

Zkontroluj svůj web

Chceš-li najít obrázky bez užitečného alt textu, spusť na stránce bezplatnou kontrolu alternativních textů. Chceš-li návrhy pro mnoho obrázků, použij nástroj Alternativní texty. Automatický návrh může přehlédnout, na čem na tvé stránce záleží, proto si každý text přečti a změň ho, když neodpovídá účelu obrázku.

Nástroje Do4U pomáhají se psaním, ne s rozhodnutím: zda je obrázek informativní, funkční nebo dekorativní, víš nejlépe ty. Po velkých změnách webu zkontroluj znovu.