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

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

Alt text (atribut alt v elementu <img>) je textová náhrada vizuálního obsahu. Slouží k zpřístupnění informace uživatelům používajícím čtečky 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 – Success Criterion 1.1.1 Non-text Content: každý informatívní obrázek musí mít textovou alternativu ekvivalentní úč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 LLM odpovědím

Relevance dotazu: vyhledávače i generativní systémy využívají alt text k pochopení tématu obrázku, což zvyšuje šanci na zobrazení v obrázkovém a 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 objevit 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 neuvedete? 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 stručný; detail do textu v okolí, <figcaption> nebo odkaz na rozšířený popis.

10 zásad psaní kvalitního alt textu

Buďte informativní, ne 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 to hlásí samy.
Krátce, ale ne za každou cenu: cíl 80–140 znaků. V případě potřeby delšího vysvětlení použijte okolní text.
Neplňte 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 nad obrázkem již sděluje totéž, alt zbytečně nekopírujte.
Lokalizace: pište v jazyce stránky; pro vícejazyčné weby používejte lokalizované alty.
Dostupnost vs. estetika: prioritou 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“), detailní 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 informativní hodnoty použijte alt="". Pokud je obrázek duplicitou textu v bezprostřední 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 chybět.
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ů přes 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í dávat smysl.
Čtečka obrazovky: otestujte alespoň kritické stránky (NVDA/VoiceOver).
Automatizované nástroje: lintovací skripty CI, které hlásí 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: pro více jazyků 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 jej musí zkontrolovat.
Vyhněte se halucinacím: AI nesmí doplňovat neexistující údaje (model, rok, ceny).
Škálování: pro velké galerie použijte pravidla: kontext z názvu položky + typ + klíčová vlastnost.

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

Chybějící alt u informatívních obrázků.
Duplicitní fráze: „Obrázek zobrazuje…“; zbytečně prodlužuje.
Keyword stuffing: nečitelný a neetický.
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ě

Špatně: <img alt="produkt">
Správně: <img alt="Elektrická zubní kartáček SonicCare X200, bílá, 2 nástavce">
Špatně: <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 s daty.
Špatně: <img alt="logo">
Správně: pokud je logo odkazem domů, alt „Domů“; pokud jen dekorací, alt="".

Specifika pro e-commerce a marketplace

Varianty: alt musí odrážet vybranou variantu (barva/velikost).
Více fotografií: první – shrnutí; detaily – specifika (zadní kapsa, textura kůže).
UGC fotografie: alt ať je 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 v případě potřeby.
Tón: faktický, bez marketingových superlativů.
Pořadí informací: entita → klíčový atribut → kontext použití.
Dakritika: zachovávejte; je součástí významu.

Kontrolní seznam před publikací

Má každý informatívní 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 s 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 prop alt a validujte neprázdnost tam, kde to dává smysl.
V CI zavádějte 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; neodvozujte z názvu 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, nikoliv na vizuální šum. Se srozumitelnými týmovými pravidly a snadnou automatizací lze kvalitu altů udržet i ve velkém rozsahu.