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

Alt text: definice, účel a proč je důležitý

Alt text (atribut alt v elementu <img>) je textová náhrada vizuálního obsahu. Slouží k zpřístupnění informace uživatelům čteček obrazovky, v případě 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 zásadní pro porozumění významu obrázku v kontextu stránky a uživatelských dotazů.

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 odpovídající účelu obsahu.
Dekorativní obsah by měl mít prázdný alt (alt="") a ideálně role="presentation" nebo aria-hidden="true" v nepřístupnějších případech.
Právní rámce (např. směrnice EU o přístupnosti, požadavky pro veřejnou správu) často implicitně pož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 využívají alt text k pochopení tématu obrázku, což zvyšuje pravděpodobnost zobrazení v obrázkovém a univerzálním vyhledávání.
Kontext entity: alt text v kombinaci s nadpisem, popiskem (<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 alt textu.
Je to ovládací prvek (tlačítko/odkaz)? Použijte alt vyjadřující akci/účel, ne vizuál (například „Odeslat objednávku“).
Je obrázek složitý (graf, schéma, infografika)? Alt stručný; podrobnější popis do okolního textu, <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 úkol 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í automaticky.
Krátce, ale ne za každou cenu: cílová délka 80–140 znaků. Pokud je potřeba delší vysvětlení, umístěte jej do okolního textu.
Neplňte klíčovými slovy: přirozenost a přesnost mají přednost před SEO spamem.
Pište v kontextu: alt by měl navazovat na nadpis, odstavec a odkazový text.
Uveďte jedinečnou informaci: pokud nadpis přímo nad obrázkem obsahuje stejnou informaci, alt ji zbytečně nekopírujte.
Lokalizace: pište v jazyce stránky; u vícejazyčných webů 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 v textu nebo <figcaption>.
Graf: alt informuje o výsledku („Tržby Q3 2025 +18 % mezikvartálně“); 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 informační hodnoty použijte alt="". Pokud je obrázek duplicitou textu v těsné blízkosti (například logo vedle názvu firmy v <h2>), zvažte prázdný alt, aby čtečky nečetly stejnou informaci 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 či 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 atribut alt prázdný u informatívní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.
U <picture> zůstává alt na vlož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: co kam patří

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

Kontrola kvality a testování

Manuální audit: vypněte načítání obrázků v prohlížeči – stránka musí být srozumitelná.
Čtečka obrazovky: otestujte alespoň kritické stránky (NVDA/VoiceOver).
Automatizované nástroje: lintovací skripty v 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ý pro typy obsahu, kde je to žádoucí.
Šablony a komponenty: v designovém systému definujte pravidla altu na úrovni komponent (např. CardImage: požaduje alt).
Lokalizace: pro více jazyků ukládejte alt texty zvlášť 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, editor jej však musí zkontrolovat.
Vyhněte se halucinacím: AI nesmí doplňovat neexistující údaje (model, rok, ceny).
Škálování: u velkých galerií používejte 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žují text.
Keyword stuffing: nesrozumitelné a neetické.
Alt = název souboru: „IMG_0231.jpg“ nemá žádnou hodnotu.
Popis nesprávných atributů: například barva obalu místo názvu léčiva.

Praktické příklady správně/špatně

Š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 dat.
Špatně: <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í fotografie – shrnutí; detaily – specifika (zpětné kapsa, textura kůže).
UGC fotografie: alt by měl být neutrální a faktický; vyhněte se hodnotícím přívlastek.

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

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

Checklist před publikací

Má každý informatívní obrázek alt?
Je alt stručný, věcný a jedinečný?
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 lokalizovaný podle jazykové verze?

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

V komponentách vyžadujte prop alt a ověřujte neprázdnost tam, kde to dává smysl.
V CI nasazujte audity, které upozorňují na chybějící nebo generické alty („image“, „photo“).
Při generování statických stránek z dat namapujte pole alt z CMS; neodvozujte jej 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 jej 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 textů udržet i ve velkém rozsahu.