Takéalt text, alternativní text, atribut alt, alt tagZákladní
Definice
Alt atribut je atribut HTML značky <img>, který nese textovou alternativu obrázku pro situace, kdy uživatel obrázek nevidí. Čtou ho odečítače obrazovky, zobrazí se při nenačtení souboru a vyhledávače z něj odvozují obsah obrázku. Prázdná hodnota alt="" je platná a znamená, že obrázek je čistě dekorativní.
Než se na to spolehnete: Doporučení délky altu do ~125 znaků je zavedená praxe odvozená z chování odečítačů, nikoli limit dané specifikací. Rozsah povinností podle Evropského aktu o přístupnosti (směrnice (EU) 2019/882, účinnost od června 2025) je zjednodušený, u konkrétního e-shopu je potřeba ověřit dopad individuálně.
Co se alt atributem sděluje
Alt atribut nese funkci obrázku v konkrétním kontextu stránky, ne jeho popis do detailu. Stejná fotografie může mít v katalogu produktů text „Běžecká bota Nimbus 26, boční pohled“, zatímco v článku o výrobě podrážek „Vrstvená pěnová podrážka“. Rozhodující je otázka: co by na tom místě stálo, kdyby obrázek nešlo vůbec použít.
HTML specifikace WHATWG považuje alt u <img> za povinný ve všech případech, kdy nelze textovou alternativu odvodit odjinud. Vynechání atributu a prázdná hodnota přitom nejsou totéž: chybějící alt nechává asistivní technologie hádat a některé odečítače pak přečtou název souboru, kdežto alt="" je explicitní pokyn obrázek při čtení přeskočit.
Kdy nechat alt prázdný
Prázdná hodnota patří dekoracím a redundantním obrázkům. Typicky jde o ornamentální oddělovače, ikonu vedle textového odkazu, který už sám říká „Stáhnout PDF“, nebo o obrázek v odkazu, kde popis nese sousední titulek. Zdvojení informace je pro uživatele odečítače horší než ticho: stejnou větu uslyší dvakrát za sebou.
Naopak obrázek, který je jediným obsahem odkazu nebo tlačítka, musí mít alt vždy. Text tam popisuje cíl akce, nikoli grafiku: u loga vedoucího na titulní stranu je vhodnější „Domů“ nebo název firmy než „logo“.
Grafy, screenshoty a text v obrázku
U složitých obrázků se krátká alternativa nevejde. Osvědčený postup je dvojice: stručný alt, který pojmenuje typ a téma („Sloupcový graf tržeb podle kvartálů 2024“), a plný popis v okolním textu, v <figcaption> nebo v rozbalovací tabulce s daty. Text vysázený do obrázku, například cena v banneru, patří do altu doslova, jinak je pro část uživatelů nedostupný.
Jaký má alt atribut vliv na SEO
Vyhledávače používají alt jako hlavní textový signál o obsahu obrázku, což rozhoduje o zařazení do vyhledávání obrázků. Alt zároveň funguje jako kotevní text, když je obrázek zabalený v odkazu. Vycpávání klíčovými slovy ale spadá pod spamové techniky a přirozeně napsaná alternativa vyjde lépe i pro roboty. Podobně jako meta description jde o metadata, která přímo nezaručí pozici, ale ovlivní, jak je stránka pochopena.
Právní rozměr přístupnosti
Textové alternativy jsou první kritérium WCAG (1.1.1 Netextový obsah) a v Česku je vyžaduje zákon o přístupnosti internetových stránek u subjektů veřejné správy. Evropský akt o přístupnosti rozšiřuje obdobné povinnosti na část komerčních služeb, včetně e-shopů. Chybějící alt tak není jen kosmetická vada auditu.
Jak alt zkontrolovat
Automatické nástroje spolehlivě odhalí jen chybějící atribut, nikoli nesmyslný obsah. Praktický test: nechat si stránku přečíst odečítačem, nebo v prohlížeči blokovat načítání obrázků a přečíst si, co zbylo. Hodnoty jako „obrazek1.jpg“, „foto“ nebo „ilustrační obrázek“ projdou validátorem a uživateli nesdělí nic.
Příklady z praxe
Produktová fotka v e-shopu
Detail produktu obsahuje pět fotografií téže boty. Užitečné je popsat, čím se každý snímek liší, místo aby všechny nesly stejný název produktu. Uživatel odečítače tak pozná, že prochází další pohledy, a nemusí poslouchat pětkrát totéž.
<img src="nimbus-bocni.jpg" alt="Běžecká bota Nimbus 26 z boku, modrý svršek"> <img src="nimbus-podrazka.jpg" alt="Podrážka boty Nimbus 26 se vzorem pro asfalt">Ikona v odkazu, který už má text
Odkaz na výpis faktury obsahuje ikonu PDF a hned vedle ni text „Stáhnout fakturu (PDF)“. Ikona nepřidává žádnou informaci, takže dostane prázdný alt. Bez něj by odečítač přečetl název souboru a uživatel by slyšel „pdf ikona stáhnout fakturu pé dé ef“.
<a href="/faktura-2024-11.pdf"> <img src="pdf.svg" alt=""> Stáhnout fakturu (PDF) </a>
Časté omyly
- MýtusKaždý obrázek musí mít alt vyplněný, jinak je stránka nepřístupná.
- Ve skutečnostiDekorativní obrázky mají mít alt="", tedy prázdný, ale přítomný. Popisovat ornament nebo ikonu duplikující sousední text uživatele odečítače zdržuje a ruší.
- MýtusDo altu se vyplatí nacpat klíčová slova, vyhledávače to ocení.
- Ve skutečnostiVycpávání altu klíčovými slovy Google výslovně řadí ke spamovým praktikám a hrozí za něj spíš postih než zlepšení. Přirozený popis obsahu obrázku funguje pro vyhledávání obrázků lépe.
- MýtusAlt atribut a title atribut dělají v podstatě totéž.
- Ve skutečnostiAlt je textová alternativa obrázku, kdežto title zobrazuje bublinu při najetí myší. Title je nedostupný na dotykových zařízeních a odečítače s ním zacházejí nekonzistentně, takže alt nenahradí.
Časté dotazy
- Jak dlouhý má být alt atribut?
- Alt atribut bývá nejúčinnější v rozsahu zhruba jedné věty, tedy asi do 125 znaků. Nejde o technický limit specifikace, ale o praktickou hranici: některé starší odečítače text po určité délce dělí a dlouhý popis se špatně poslouchá. Pokud obrázek nese víc informace, než se do věty vejde, patří rozbor do okolního textu, do popisku figcaption nebo do datové tabulky pod grafem. Alt pak jen pojmenuje, o jaký obrázek jde, a odkáže na to, kde je celý obsah k dispozici.
- Potřebují alt atribut i obrázky vložené přes CSS background-image?
- Obrázky vložené jako CSS pozadí alt atribut mít nemohou, protože alt existuje jen na HTML značce img. Právě proto patří do pozadí výhradně dekorace. Nese-li grafika informaci, měla by být v HTML jako img s altem, případně jako inline SVG s prvkem title a atributem role="img". Nouzové řešení je vizuálně skrytý text v HTML nebo aria-label na prvku, ale čistší je obrázek přesunout z CSS do obsahu dokumentu.
- Co psát do altu u dekorativního obrázku, když validátor hlásí chybu?
- U dekorativního obrázku patří do altu prázdný řetězec, tedy alt="" bez mezery uvnitř. Validátor tuto zápis akceptuje, chybu hlásí obvykle tehdy, když atribut chybí úplně, nebo když je obrázek jediným obsahem odkazu. Mezera uvnitř uvozovek není totéž co prázdná hodnota a některé nástroje ji vyhodnotí jako neprázdný text. Doplnit lze ještě role="presentation", ale u prázdného altu to není nutné.
- Umí umělá inteligence vygenerovat alt atributy automaticky?
- Modely pro popis obrázků dnes vygenerují použitelný návrh altu a v redakčních systémech se běžně nabízejí jako výchozí hodnota. Automatický popis ale zná pixely, ne kontext stránky, takže u produktové fotky napíše obecné „bota na bílém pozadí“ místo názvu modelu a u grafu neuvede závěr, kvůli kterému tam graf je. Rozumný postup je nechat model připravit koncept a nechat autora obsahu jej zkontrolovat a doplnit o kontext.
Zdroje
- HTML Standard(otevře se v novém okně)
- The Image Embed element (<img>)(otevře se v novém okně)
- Web Content Accessibility Guidelines (WCAG) 2.2(otevře se v novém okně)
- Google Image SEO best practices(otevře se v novém okně)
- Zákon č. 99/2019 Sb., o přístupnosti internetových stránek a mobilních aplikací(otevře se v novém okně)
Související pojmy
