Alt text

V kódu stránky je to atribut u značky obrázku:

<img src="nimbus-bocni.jpg" alt="Běžecká bota Nimbus 26 z boku, modrý svršek">

Když se obrázek z nějakého důvodu neukáže - pomalé připojení, špatná cesta k souboru, čtečka obrazovky, která obrázky vůbec nečte - zobrazí nebo přečte se místo něj tenhle text. Bez něj asistivní technologie hádá a část čteček přečte rovnou název souboru. To slyší uživatel čtečky jako „i mg podkryscore nimbus podtržítko 26 tečka jpg” místo věty, která něco říká.

Prázdný alt není chyba - je to správná odpověď

Nejčastější mýtus je, že každý obrázek musí mít alt vyplněný, jinak je stránka nepřístupná. Neplatí to. Rozhoduje typ obrázku:

• Obrázek nese informaci (produktová fotka, graf, ilustrace k článku) → alt popisuje, co je vidět, v kontextu té konkrétní stránky.
• Obrázek je čistě dekorativní (ornamentální oddělovač, pozadí, ikona vedle textu, který už totéž říká) → alt="", tedy prázdná hodnota, ne chybějící atribut. Čtečka obrázek při čtení přeskočí.

Rozdíl mezi prázdným a chybějícím altem je přesně tenhle: alt="" je explicitní pokyn „tohle přeskoč”, zatímco chybějící alt nechává hádat. Typický případ, kde se to plete: ikona PDF hned vedle textu „Stáhnout fakturu”. Ikona sama o sobě nic nepřidává - přečíst dvakrát tutéž informaci je pro uživatele čtečky horší než ticho.

Obrázek jako odkaz je jiný případ

Když je obrázek jediným obsahem odkazu nebo tlačítka - typicky logo vedoucí na titulní stránku, nebo ikona bez doprovodného textu - musí mít alt vždycky, a text v něm popisuje cíl odkazu, ne obrázek. U loga v hlavičce je lepší „Domů” nebo název firmy než „logo”.

Past nastává, když je ve stejném odkazu obrázek i text vedle sebe. Pokud alt obrázku zopakuje totéž, co už říká okolní text, vznikne pro čtečku duplicita - stejnou informaci uslyší dvakrát za sebou. V takovém případě je lepší nechat alt prázdný a nechat mluvit text.

Jak psát alt, který má smysl

• Popiš funkci obrázku v kontextu stránky, ne obrázek do detailu. Stejná fotka boty má v katalogu jiný alt („Běžecká bota Nimbus 26, boční pohled”) než v článku o výrobě podrážek („Vrstvená pěnová podrážka”). Otázka zní: co by na tom místě stálo, kdyby se obrázek vůbec nedal použít?
• Bez slov jako „obrázek” nebo „fotografie”. Čtečka obrazovky už sama ohlásí, že jde o obrázek - psát to znovu do textu je zbytečné.
• Krátce. Doporučení kolem 125 znaků je zavedená praxe odvozená z toho, jak text dělí starší čtečky, ne technický limit specifikace. Když se obsah nevejde do jedné věty, nepatří do altu celý - patří do okolního textu nebo popisku pod obrázkem.
• Bez klíčových slov navíc. Google řadí vycpávání altu klíčovými slovy mezi spamové praktiky ve svých pokynech k SEO obrázků. Přirozený popis funguje pro vyhledávání obrázků líp než fráze nacpaná pětkrát za sebou.

U grafů, screenshotů nebo obrázků s vlastním textem (třeba cena v banneru) krátký alt nestačí popsat všechno. Osvědčený postup je dvojice: stručný alt, který pojmenuje typ a téma („Sloupcový graf návštěvnosti podle měsíců”), a plný rozbor v okolním textu nebo v popisku pod obrázkem. Text vysázený přímo do obrázku patří do altu doslova - jinak k němu část uživatelů nemá přístup vůbec.

Alt a title nejsou totéž

Časté zaměnění: title je tooltip, který se zobrazí po najetí myší, a na dotykových zařízeních nemá využití vůbec. alt je textová alternativa obrázku, kterou čtou čtečky a která se zobrazí, když se soubor nenačte. Jeden atribut nenahrazuje druhý - title je doplněk, alt je nutnost.

Dopad na SEO je nepřímý, ne kosmetický

Alt je jeden z prvků on-page SEO, ale sám o sobě stránku výš neposune - není to faktor, kterým by se dala „hacknout” pozice. Funguje jinak: Google ho podle vlastní dokumentace bere spolu s obsahem stránky a rozpoznáváním obrazu jako signál o tom, co obrázek zobrazuje, a používá ho hlavně pro zařazení do vyhledávání obrázků. Když je obrázek zabalený v odkazu a nemá vlastní text, funguje alt navíc jako kotevní text pro tento odkaz - podobný signál jako u zpětných odkazů, jen v rámci vlastního webu.

Pro běžný web to v praxi znamená dvě věci: (1) návštěvnost z Google Images bývá u českých webů zlomek návštěvnosti z běžného vyhledávání, takže alt neřeší primární cíl auditu, jen ho doplňuje; (2) přesto se vyplatí mít ho vyplněný pořádně - je to levná práce s měřitelným, i když menším přínosem, a řeší zároveň přístupnost, kterou u komerčních webů kryje zákon o přístupnosti (u veřejné správy) a postupně i evropská legislativa u části komerčních služeb.

Co v praxi nejčastěji opravuju

Na e-shopech a webech s velkým počtem produktů se dokola opakují dvě chyby: alt buď chybí úplně (obrázek nemá atribut vůbec), nebo v něm je jen název souboru - IMG_2384.jpg, produkt-1.png. Obojí projde validátorem, ale uživateli ani vyhledávači to nic neřekne.

U katalogu se stovkami až tisíci produktů se to nedá vyplnit ručně po jednom bez systému. Řešení, které funguje: vzorec odvozený z existujících dat produktu (klíčová slova do altu ale nepatří navíc, stačí název, varianta, případně kategorie), který se doplní automaticky při importu, a ruční pozornost jen tam, kde na tom nejvíc záleží - hlavní produktové fotky na návštěvnosti nejsilnějších stránek, ne každý ze čtyř úhlů pohledu na každý produkt v katalogu. Automaticky generovaný popis od nástrojů pro rozpoznávání obrazu je dobrý základ, ale zná pixely, ne kontext stránky - u produktové fotky napíše obecné „bota na bílém pozadí” místo názvu modelu, takže se vždycky vyplatí návrh zkontrolovat, ne ho vzít bez úpravy.