Alternativní text: popis obrázku pro přístupnost a SEO

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

Alternativní text (atribut alt v elementu <img>) je textovou náhradou vizuálního obsahu. Slouží ke zpřístupnění informací 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 (optimalizace pro odpovědi a AI vyhledávače) je kvalitní alternativní 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 Netextový obsah: každý informativní obrázek musí mít textovou alternativu odpovídající účelu obsahu.
Dekorativní obsah má mít prázdný alternativní text (alt="") a ideálně také role="presentation" nebo aria-hidden="true" v nestandardních případech.
Právní rámce (např. směrnice EU o přístupnosti, požadavky na veřejnou správu) často implicitně vyžadují dostupné alternativy k obrázkům.

Alternativní 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í alternativní text k pochopení tématu obrázku, což zvyšuje šanci na zobrazení ve vyhledávání obrázků i v univerzálním vyhledávání.
Kontext entity: alternativní text v kombinaci s nadpisem, popiskem (<figcaption>) a okolním textem pomáhá modelům správně zařadit entitu (produkt, osobu, místo).
Odpovědi bez prokliku: dobře popsané obrázky se mohou objevit v karuselech, odpovědích nebo multimodálních výsledcích.

Kdy použít jaký typ alternativního 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 alternativním textu.
Jde o ovládací prvek (tlačítko/odkaz)? Použijte alternativní text vyjadřující akci/účel, nikoli vzhled (např. „Odeslat objednávku“).
Je obrázek složitý (graf, schéma, infografika)? Alternativní text stručný; podrobnosti uveďte v okolním textu, v <figcaption> nebo prostřednictvím odkazu na rozšířený popis.

10 zásad pro psaní kvalitního alternativního 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 podle úlohy uživatele: u produktové fotografie zdůrazněte vlastnosti důležité pro rozhodování (materiál, barva, varianta).
Vynechte nadbytečná slova jako „obrázek“, „fotka“, „ikona“ – čtečky obrazovky je oznámí samy.
Stručně, ale ne za každou cenu: cílem je 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.
Pište v kontextu: alternativní text má navazovat na nadpis, odstavec a text odkazu.
Uveďte jedinečnou informaci: pokud nadpis přímo nad obrázkem už říká totéž, alternativní text zbytečně neopakujte.
Lokalizace: pište v jazyce stránky; u vícejazyčných webů používejte lokalizované alternativní texty.
Přístupnost vs. estetika: prioritou je informativnost, nikoli marketingové fráze.
Konzistentní styl: interní pokyny 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: stručný alternativní text („Architektura mikroslužeb e-shopu“), podrobný popis do textu nebo do <figcaption>.
Graf: alternativní text informuje o závěru („Tržby ve 3. čtvrtletí 2025 vzrostly meziročně o 18 %“); datové body uveďte v tabulce pod grafem.
Mapy: stručný alternativní text: „Mapa prodejen na Slovensku – 24 lokalit“; seznam adres uveďte v textu.
Ikony ve formulářích: pokud jsou pouze dekorativní, použijte alt=""; pokud slouží jako tlačítko, použijte alternativní text „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 duplikátem textu v těsné blízkosti (např. logo vedle názvu firmy v <h2>), zvažte prázdný alternativní text, aby čtečky obrazovky nečetly tytéž informace dvakrát.

Komplexní vizuální prvky: rozšířené popisy

Alternativní text = shrnutí: „Infografika: 5 kroků migrace CMS“.
Podrobnosti = v textu: za obrázek vložte odstavec s klíčovými údaji či kroky.
Figure a figcaption: prvek <figure> se smysluplným prvkem <figcaption> doplňuje alternativní text.

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

<img src="..." alt="..."> – nikdy nenechávejte atribut alt chybět.
U dekorativních SVG vložených přímo do kódu použijte aria-hidden="true"; pokud jsou informativní, doplňte do SVG <title> a případně také <desc>.
U prvku <picture> zůstává atribut alt u vnořeného prvku <img>.
Lazy loading (loading="lazy") alternativní text neovlivňuje; vyhněte se skrývání obrázků pomocí display:none u obsahových vizuálních prvků.

Alternativní text vs. jiná metadata: k čemu co slouží

Alt: sémanticky nezbytný popis pro přístupnost a porozumění.
Atribut title: volitelný; čtečky obrazovky jej nezobrazují spolehlivě.
Open Graph/Twitter Cards: určují náhledy na sociálních sítích; nenahrazují alternativní text.
Název souboru a data-*: vedlejší signály; nejde o náhradu alternativního textu.

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ň klíčové stránky (NVDA/VoiceOver).
Automatizované nástroje: skripty pro linting v CI, které upozorní na chybějící nebo příliš dlouhý alternativní text.

Workflow a správa v CMS

Povinná pole: nastavte alternativní text jako povinné pole pro typy obsahu, u kterých je to žádoucí.
Šablony a komponenty: v design systému definujte pravidla pro alternativní text na úrovni komponenty (např. CardImage: vyžaduje alt).
Lokalizace: pro více jazyků ukládejte alternativní texty samostatně podle jazykového kódu.
Školení editorů: interní příručky s příklady správných a nesprávných alternativních textů.

Automatizace a AI: přínosy a rizika

Generativní návrh: AI může navrhnout alternativní text 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 rozsáhlých galerií použijte pravidla: kontext z názvu položky + typ + klíčová vlastnost.

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

Chybějící alternativní text u informativních obrázků.
Duplicitní fráze: „Obrázek zobrazuje…“; zbytečně prodlužuje text.
Nadměrné používání klíčových slov: nečitelné a neetické.
Alternativní text = název souboru: „IMG_0231.jpg“ nemá žádnou hodnotu.
Popis něčeho nepodstatného: barva obalu místo názvu léku.

Praktické příklady správného a nesprávného použití

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 8 tisíc na 32 tisíc návštěv"> a tabulka dat pod grafem.
Nesprávně: <img alt="logo">
Správně: pokud logo odkazuje na domovskou stránku, použijte alternativní text „Domů“; pokud je pouze dekorativní, alt="".

Specifika pro e-commerce a marketplace

Varianty: alternativní text musí odpovídat vybrané variantě (barva/velikost).
Více fotografií: první – souhrn; detaily – specifické vlastnosti (zadní kapsa, textura kůže).
Fotografie od uživatelů (UGC): alternativní text má být neutrální a věcný; vyhněte se hodnotícím přívlastkům.

Stylová příručka (stručné pokyny pro tým)

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

Kontrolní seznam před publikováním

Má každý informativní obrázek alternativní text?
Je alternativní text stručný, věcný a jedinečný?
Neduplikuje alternativní text okolní text, aniž by přidával nějakou hodnotu?
Mají dekorativní obrázky nastaveno alt=""?
Mají grafy a schémata rozšířený popis v textu?
Je alternativní text lokalizován podle jazykové verze?

Tipy k implementaci pro vývojáře

V komponentách vyžadujte prop alt a ověřujte, zda není prázdný, tam, kde to dává smysl.
V CI nasaďte audity, které upozorní na chybějící nebo obecné alternativní texty („image“, „photo“).
Při generování statických stránek z dat mapujte pole alt z CMS; neodvozujte jej z názvu souboru.

Shrnutí

Alternativní text je drobný atribut s velkým dopadem: zpřístupňuje obsah, usnadňuje porozumění vyhledávačům a multimodálním modelům a zvyšuje použitelnost stránek. Klíčem je psát jej pro lidi – jasně, v kontextu a s důrazem na informaci, nikoli na vizuální šum. Díky srozumitelným týmovým pravidlům a jednoduché automatizaci lze udržet kvalitu alternativních textů i ve velkém měřítku.