Jak psát alt texty obrázků a nepropadnout omylům

Alt text není místo pro klíčová slova. Je to krátký popis obrázku pro lidi, kteří ho nevidí, a pro roboty, kteří mu nerozumí. Vyhledávače z něj čerpají kontext, ale nejdřív slouží přístupnosti. Čtečky obrazovky nevidomým uživatelům obsah obrázku přečtou nahlas. Pokud tam vložíte seznam klíčových slov, zhoršíte zážitek lidí i důvěru vyhledávače. Podívejme se, co v praxi funguje a které omyly se opakují nejčastěji.

Co alt text je a k čemu slouží

Atribut alt je textová alternativa obrázku v HTML. Zobrazí se, když se obrázek nenačte, a přečte ho čtečka pro nevidomé. Vyhledávač podle něj pozná obsah obrázku.

Je to součást přístupnosti webu. Pro nevidomé a slabozraké je to jediný způsob, jak obrázku porozumět. Dobře napsaný alt text tak zlepšuje uživatelský zážitek.

Alt text není titulek ani popisek pod obrázkem. Atribut title je jiný prvek a zobrazí se při najetí myši. Tyto dva pojmy se často zaměňují.

Omyl: do altu patří klíčová slova

Nejčastější chybou je plnění altu klíčovými slovy. Text typu „levné boty koupit boty e-shop“ je čtečkou přečten celý. Pro uživatele je to nepříjemné a pro vyhledávač podezřelé.

Pravidla vyhledávačů takové plnění označují za zneužití. Může vést ke snížení hodnoty stránky. Alt by měl popisovat, co je na obrázku.

Pokud se klíčové slovo přirozeně hodí, použijte ho. Například u obrázku červených bot napište „červené kožené boty na podpatku“. Pokud ne, nevkládejte ho násilně.

Omyl: prázdný alt je vždy chyba

U dekorativních obrázků je prázdný alt správně. Zapisuje se jako alt="" a čtečka obrázek přeskočí. Nevidomý uživatel se tak nezdržuje zbytečnými popisy.

Příkladem je ozdobná linka, pozadí nebo ikona vedle textu, který totéž říká. Popis by byl duplicitní. Prázdný atribut je lepší než popis „ozdobná čára“.

Zcela chybějící atribut je ale chyba. Čtečka pak může přečíst název souboru. Vždy uveďte atribut, i když zůstane prázdný.

Jak napsat dobrý alt text

• Popište, co je na obrázku a proč tam je, ne jen co zobrazuje.
• Držte se stručnosti, obvykle do přibližně sto znaků.
• Nezačínejte slovy „obrázek“ nebo „fotografie“, čtečka to ohlásí sama.
• U grafů uveďte hlavní sdělení, podrobná data dejte do textu.
• U obrázku s textem přepište jeho obsah.

Kontext rozhoduje. Stejná fotografie psa může mít v článku o plemenech jiný alt než v článku o veterinární péči. Ptejte se, co čtenář z obrázku potřebuje vědět.

Obrázky v odkazech a tlačítkách

Pokud je obrázek odkaz, alt popisuje cíl odkazu, ne obrázek. Například logo odkazující na úvodní stranu může mít alt „Úvodní strana“. Čtečka uživateli oznámí, kam odkaz vede.

Totéž platí pro tlačítka s ikonou. Lupa u vyhledávání má mít alt „Hledat“. Bez popisu je ovládací prvek pro nevidomé nepoužitelný.

Složité obrázky, třeba infografiky, potřebují delší popis. Dejte jej do textu na stránce a v altu uveďte stručný název. Kdo chce, najde podrobnosti pod obrázkem.

Jak alty zkontrolovat na webu

Otestujte web procházecím nástrojem, který vypíše obrázky bez alt atributu. Většina běžných SEO nástrojů tuto funkci nabízí. Začněte nejnavštěvovanějšími stránkami.

Ruční kontrolu proveďte vypnutím obrázků v prohlížeči. Zobrazí se alt texty a poznáte, zda dávají smysl. Je to rychlý test.

Na velkých webech nastavte pravidlo při nahrávání obrázků. Redaktor musí alt vyplnit, jinak se obrázek neuloží. Prevence vyjde levněji než dodatečné opravy.

Časté otázky

Má alt text vliv na pozice ve vyhledávání?

Ano, ale omezený. Pomáhá vyhledávači pochopit obrázek a hraje roli ve vyhledávání obrázků. Hlavním cílem má být přístupnost, ne manipulace pozicemi. Přeplněný alt může naopak uškodit.

Jak dlouhý má být alt text?

Obvykle stačí jedna věta, kolem sta znaků. Čtečky delší texty zvládnou, ale uživatelé je nesnášejí. Složitější sdělení rozepište v textu stránky a v altu ponechte stručný popis.

Má se alt psát u každého obrázku?

Atribut by měl být uveden u každého obrázku. U informativních obrázků obsahuje popis, u dekorativních zůstane prázdný. Chybějící atribut je chyba, prázdný záměrně vyplněný atribut ne.

Můj tip: Doporučil bych si alt text přečíst nahlas bez pohledu na obrázek. Pokud z něj pochopíte, co obrázek říká, je správně. Pokud zní jako seznam slov, přepište ho do věty.

Zdroje

• Doporučení pro přístupnost webového obsahu WCAG
• Dokumentace vyhledávačů pro webmastery