Alt text: význam, účel a optimalizace pro SEO a přístupnost

Alt text: definice, účel a proč na něm záleží

Alt text (atribut alt v prvku <img>) je textová náhrada vizuálního obsahu. Slouží k zpřístupnění informace uživatelům čteček obrazovky, při selhání načtení obrázku a jako sémantická pomůcka pro vyhledávače. V moderním SEO a AIO/AEO (Answer/AI Engine Optimization) je kvalitní alt text důležitý pro pochopení významu obrázku v kontextu stránky a dotazů uživatelů.

Vztah k přístupnosti (WCAG) a právním požadavkům

WCAG 2.x – Kritérium úspěšnosti 1.1.1 Non-text Content: každý informativní obrázek musí mít textovou alternativu odpovídající účelu obsahu.
Dekorativní obsah má mít prázdný alt (alt="") a ideálně role="presentation" nebo aria-hidden="true" v nestandardních případech.
Právní rámce (např. směrnice EU o přístupnosti, požadavky pro veřejnou správu) často implicitně vyžadují dostupné alternativy k obrázkům.

Alt text a SEO/AEO: jak pomáhá vyhledávání a odpovědím LLM

Relevance dotazu: vyhledávače i generativní systémy používají alt text k pochopení tématu obrázku, což zvyšuje šanci na zobrazení ve vyhledávání obrázků i univerzálním vyhledávání.
Kontext entity: alt text v kombinaci s nadpisem, popisem (<figcaption>) a okolním textem pomáhá modelům správně zařadit entitu (produkt, osobu, místo).
Zero-click odpovědi: dobře popsané obrázky se mohou zobrazit v karuselu, odpovědích nebo multimodálních výsledcích.

Kdy použít jaký typ alt textu: rozhodovací strom

Je obrázek čistě dekorativní? Ano → alt="". Ne → pokračujte.
Nese obrázek informaci, kterou jinde na stránce neuvádíte? Ano → stručně popište informaci v altu.
Je to ovládací prvek (tlačítko/odkaz)? Použijte alt vyjadřující akci/účel, nikoliv vizuál (např. „Odeslat objednávku“).
Je obrázek složitý (graf, schéma, infografika)? Alt krátký; detail do okolního textu, <figcaption> nebo odkaz na rozšířený popis.

10 zásad psaní kvalitního alt textu

Buďte informativní, nikoliv popisní: místo „fotka muže“ použijte „Onkolog při ultrazvukovém vyšetření štítné žlázy“.
Optimalizujte pro úlohu uživatele: u produktové fotografie zdůrazněte vlastnosti důležité pro rozhodování (materiál, barva, varianta).
Vynechejte redundantní slova jako „obrázek“, „fotka“, „ikona“ – čtečky je oznámí samy.
Krátce, ale ne za každou cenu: cílová délka 80–140 znaků. Pokud je potřeba delší vysvětlení, použijte okolní text.
Nepřeplňujte klíčovými slovy: přirozenost a přesnost mají přednost před SEO spamem.
Pište v kontextu: alt má navazovat na nadpis, odstavec a anchor text.
Uveďte unikátní informaci: pokud nadpis přímo nad obrázkem už říká totéž, alt zbytečně nekopírujte.
Lokalizace: pište v jazyce stránky; u vícejazyčných webů používejte lokalizované alty.
Dostupnost vs. estetika: priorita je informativnost, ne marketingové fráze.
Konzistentní styl: interní směrnice pomohou sjednotit délku a tón.

Specifika podle typu obrázku

Produkt: „Dámské kožené boty, model Aurora, hnědé, nízký podpatek, šněrování.“
Schéma/diagram: alt krátký („Architektura mikroservisů e-shopu“), podrobný popis do textu nebo <figcaption>.
Graf: alt informuje o závěru („Tržby Q3 2025 +18 % meziročně“); datové body uveďte v tabulce pod grafem.
Mapy: alt stručný: „Mapa prodejen na Slovensku – 24 lokalit“; seznam adres v textu.
Formulářové ikony: pokud jsou pouze dekorativní, alt=""; pokud jsou tlačítkem, alt „Vyhledat“ místo „lupa“.

Práce s dekorativními a redundantními obrázky

U vizuálních prvků bez informatívní hodnoty použijte alt="". Pokud je obrázek duplikátem textu v těsné blízkosti (např. logo vedle názvu firmy v <h2>), zvažte prázdný alt, aby čtečky nečetly stejné informace dvakrát.

Komplexní vizuály: rozšířené popisy

Alt = shrnutí: „Infografika: 5 kroků migrace CMS“.
Detail = v textu: za obrázkem vložte odstavec s klíčovými údaji nebo kroky.
Figure a figcaption: <figure> se smysluplným <figcaption> doplňuje alt.

Technické osvědčené postupy (HTML a ARIA)

<img src="..." alt="..."> – nikdy nenechávejte alt prázdný nebo chybějící u informativních obrázků.
Pro dekorativní SVG vložené inline použijte aria-hidden="true"; pokud je informatívní, doplňte <title> a případně <desc> v SVG.
Pro <picture> zůstává alt na vnořeném <img>.
Lazy-loading (loading="lazy") neovlivňuje alt; vyhněte se skrývání obrázků pomocí display:none u obsahových vizuálů.

Alt text vs. jiná metadata: čemu co patří

Alt: sémanticky nezbytný popis pro přístupnost a pochopení.
Title atribut: volitelný; není spolehlivě prezentován čtečkami.
Open Graph/Twitter Cards: určují náhledy na sociálních sítích; nenahrazují alt.
Název souboru a data-*: sekundární signály; nejsou náhradou altu.

Kontrola kvality a testování

Manuální audit: vypněte načítání obrázků v prohlížeči – stránka musí mít smysl i bez nich.
Čtečka obrazovky: otestujte alespoň kritické stránky (NVDA/VoiceOver).
Automatizované nástroje: lintovací skripty v CI hlásící chybějící alt nebo příliš dlouhý alt.

Workflow a správa v CMS

Povinná pole: nastavte alt jako povinný u typů obsahu, kde je to žádoucí.
Šablony a komponenty: v design systému definujte pravidla altu na úrovni komponenty (např. CardImage: vyžaduje alt).
Lokalizace: u vícejazyčných webů ukládejte alt texty samostatně podle jazykového kódu.
Školení editorů: interní příručky s příklady dobrých a špatných altů.

Automatizace a AI: přínosy a rizika

Generativní návrh: AI může navrhnout alt jako výchozí bod, ale editor ho musí ověřit.
Vyhněte se halucinacím: AI nesmí doplňovat neexistující údaje (model, rok, ceny).
Škálování: pro velké galerie používejte pravidla: kontext z názvu položky + typ + klíčová vlastnost.

Nejčastější chyby (anti-patterns)

Chybějící alt u informativních obrázků.
Duplicitní fráze: „Obrázek zobrazuje…“; zbytečně prodlužuje text.
Keyword stuffing: nečitelný a neetický přístup.
Alt = název souboru: „IMG_0231.jpg“ nemá hodnotu.
Popis ne toho, co je důležité: barva obalu místo názvu léčiva.

Praktické příklady správně/nesprávně

Nesprávně: <img alt="produkt">
Správně: <img alt="Elektrická zubní kartáček SonicCare X200, bílá, 2 nástavce">
Nesprávně: <img alt="graf">
Správně: <img alt="Graf: návštěvnost blogu rostla od ledna do září z 8k na 32k návštěv"> a pod grafem tabulka dat.
Nesprávně: <img alt="logo">
Správně: pokud je logo odkazem na domovskou stránku, alt „Domů“; pokud jen dekorace, alt="".

Specifika pro e-commerce a marketplace

Varianty: alt musí odrážet vybranou variantu (barva/velikost).
Více fotografií: první – souhrn; detaily – specifika (zadní kapsa, textura kůže).
UGC fotky: alt by měl být neutrální a faktický; vyhnout se hodnotícím přívlastkům.

Stylová příručka (mini-guidelines pro tým)

Délka: 80–140 znaků; výjimky pokud je potřeba.
Tón: faktický, bez marketingových superlativů.
Pořadí informací: entita → klíčový atribut → kontext použití.
D iakritika: zachovávat; je součástí významu.

Checklist před publikací

Má každý informativní obrázek alt?
Je alt stručný, věcný a unikátní?
Není alt duplicitní s okolním textem bez přidané hodnoty?
Jsou dekorativní obrázky označeny alt=""?
Mají grafy a schémata rozšířený popis v textu?
Je alt lokalizován podle jazykové verze?

Implementační tipy pro vývojáře

V komponentách vyžadujte parametr alt a validujte neprázdnost tam, kde to má smysl.
V CI nasazujte audity, které hlásí chybějící nebo generické alty („image“, „photo“).
Při generování statických stránek z dat mapujte pole alt z CMS; nevyvozujte ze jména souboru.

Shrnutí

Alt text je drobný atribut s velkým dopadem: zpřístupňuje obsah, zlepšuje pochopitelnost pro vyhledávače a multimodální modely a zvyšuje použitelnost stránek. Klíčem je psát ho pro lidi – jasně, kontextově a s důrazem na informaci, nikoli na vizuální šum. Se srozumitelnými týmovými pravidly a jednoduchou automatizací lze kvalitu alt textů udržet i ve velkém rozsahu.