Alt text obrázku: co to je a jak ho správně napsat
Alt text (alternativní text) je krátký popis obrázku uložený v kódu stránky. Přečte ho nahlas čtečka obrazovky nevidomému návštěvníkovi, zobrazí se místo fotky, která se nenačetla, a podle něj vyhledávač pozná, co obrázek ukazuje. Dobrý alt text řekne, co je na obrázku důležité v souvislosti se stránkou – nic víc.
Aktualizováno
Jak alt text vypadá v kódu
Alt text je atribut alt u značky obrázku v HTML:
<img src="dort-svatebni.jpg" alt="Třípatrový svatební dort s bílými růžemi">
Na stránce ho běžně nevidíte. V redakčních systémech a e-shopových platformách se vyplňuje do pole „Alternativní text“, „Popis obrázku“ nebo „Alt“ u každé nahrané fotky. Pokud pole necháte prázdné, systém tam často doplní název souboru – a čtečka pak nevidomému přečte „IMG underscore 4521“.
Komu alt text slouží
- Lidem se čtečkou obrazovky – nevidomí a slabozrací se podle něj dozvědí, co ostatní vidí. Je to jeden ze základních požadavků na přístupnost webu.
- Vyhledávačům – obrázek „vidí“ hlavně přes alt text a okolní text. Pomáhá to ve vyhledávání obrázků a k pochopení stránky, jak popisuje heslo SEO.
- Všem s pomalým připojením – když se fotka nenačte, zobrazí se aspoň popis.
Jak napsat dobrý alt text
Představte si, že obrázek popisujete do telefonu někomu, kdo stránku nevidí. Co potřebuje vědět, aby mu nic podstatného neuteklo?
| Obrázek | Špatně | Dobře |
|---|---|---|
| Fotka týmu na stránce O nás | „tým“ | „Majitelka Jana a dva technici před firemní dodávkou“ |
| Mapa s vyznačenou pobočkou | „mapa“ | „Pobočka na rohu Hlavní a Školní ulice, vedle pošty“ |
| Fotka hotového plotu | „plot plot dřevěný plot levně Kolín“ | „Dřevěný plot z modřínových latí kolem zahrady rodinného domu“ |
| Graf v článku | „graf“ | Hlavní závěr grafu jednou větou, data v textu nebo tabulce |
- Nezačínejte „Obrázek…“ nebo „Fotka…“ – čtečka sama oznámí, že jde o obrázek.
- Popisujte podle účelu stránky. Stejná fotka kavárny bude na stránce o interiéru popsaná jinak než na stránce o snídaních.
- Text, který je na obrázku napsaný (akce, otevírací doba), patří do alt textu celý. Ještě lepší je mít ho na stránce jako běžný text.
Jak fotky pro web vybrat a připravit od focení po nahrání, popisuje průvodce fotky na web.
Dekorativní obrázky, ikony a loga
Ne každý obrázek potřebuje popis. Ozdobný předěl, pozadí nebo fotka, která jen dokresluje náladu, má mít alt prázdný: alt="". Čtečka ho pak přeskočí. Prázdný ale neznamená chybějící – když atribut úplně chybí, čtečka může přečíst název souboru.
- Logo – název firmy. Pokud je logo odkazem na úvodní stránku, stačí „Novák stavby – úvodní stránka“.
- Ikona v odkazu nebo tlačítku – popište, co tlačítko udělá („Zavolat“, „Košík“), ne jak ikona vypadá.
- Ikona vedle textu, který říká totéž – prázdný alt, jinak čtečka informaci přečte dvakrát.
Alt text v e-shopu
U produktových fotek je alt text obzvlášť důležitý, protože zákazník se podle fotek rozhoduje. Nekopírujte do všech šesti fotek produktu stejný název. Popište, čím se liší: barevná varianta, pohled zezadu, detail zapínání, produkt na postavě. Pro e-shopy, které prodávají spotřebitelům, jsou navíc od 28. 6. 2025 povinné požadavky na přístupnost (mikropodniky mají výjimku) a popsané obrázky k nim patří. Na co dalšího myslet při spuštění obchodu, shrnuje průvodce založení e-shopu.
Jak zkontrolovat, jestli alt texty máte
- Spusťte v prohlížeči Chrome nástroj Lighthouse a podívejte se do části Přístupnost – obrázky bez alt textu vypíše.
- V administraci webu nebo e-shopu projděte knihovnu obrázků a hledejte prázdná pole popisu.
- Zkuste si stránku pustit ve čtečce obrazovky – v telefonu je zabudovaná. Rychle uslyšíte, kde popisy nedávají smysl.
Časté otázky
Jak dlouhý má alt text být?
Obvykle stačí jedna krátká věta, často i pár slov. Pevný limit neexistuje, ale čtečky obrazovky čtou alt text vcelku a dlouhý popis zdržuje. Pokud obrázek potřebuje delší vysvětlení, patří do textu vedle něj.
Je alt text totéž co popisek pod obrázkem?
Ne. Popisek pod fotkou vidí všichni a může doplňovat kontext, třeba kdo fotil nebo kdy. Alt text nahrazuje samotný obrázek pro toho, kdo ho nevidí. Když popisek už říká, co je na fotce, alt text ho nemá doslova opakovat.
Pomůže alt text k lepšímu umístění ve vyhledávání?
Pomáhá hlavně vyhledávání obrázků, kde vyhledávači říká, co fotka zobrazuje. Na pozici celé stránky má malý vliv. Psát ho kvůli SEO a cpát do něj klíčová slova se nevyplatí – popis pro lidi je zároveň ten nejlepší popis pro vyhledávač.
Musím psát alt text ke každé fotce v galerii?
Ke každé, která něco sděluje, ano. U galerie realizací stačí krátce odlišit jednotlivé fotky – co a kde je na nich. Generovat alt texty automaticky z názvu souboru nebo přes umělou inteligenci bez kontroly obvykle vede k popisům, které nikomu nepomohou.