Pragmatický průvodce alternativním textem obrázků v roce 2026

Proč na alternativním textu stále záleží

Alternativní text je součástí specifikace HTML od roku 1995. O třicet let později většina obrázků na webu stále buď nemá atribut alt vůbec, nebo má alternativní text, který zní, jako by ho napsal někdo, kdo nikdy nepoužil čtečku obrazovky.

Problém už není v povědomí. Většina systémů pro správu obsahu dnes pole pro alt vyžaduje. Problém je v tom, že se z alternativního textu stala kontrolní položka pro splnění požadavků, nikoli komunikační nástroj. Lidé píšou „obrázek usmívající se osoby“, když skutečný kontext je „CEO oznamuje výsledky za Q4“.

Alternativní text existuje z jednoho důvodu: aby člověku, který obrázek nevidí, předal účel obrázku. Tento účel se mění podle kontextu. Fotografie šálku kávy na domovské stránce kavárny plní jinou funkci než stejná fotografie v blogovém článku o technikách glazování keramiky.

V roce 2026 máme také nástroje AI, které umějí alternativní text generovat automaticky. Tyto nástroje se zlepšují, ale stále nerozumějí kontextu. Popisují, co vidí, ne proč obrázek na stránce je.

Rozhodovací strom: Potřebuje tento obrázek alternativní text?

Ne každý obrázek potřebuje popisný alternativní text. Některé obrázky jsou dekorativní. Některé jsou redundantní. Některým lépe poslouží popisky nebo okolní text.

Postup rozhodování vypadá takto:

Předává obrázek informaci, která není dostupná v okolním textu? Pokud ano, potřebuje alternativní text. Pokud ne, je pravděpodobně dekorativní.

Chybělo by nevidomému uživateli něco důležitého, kdyby tento obrázek zmizel? Pokud ano, napište alternativní text. Pokud ne, použijte prázdný atribut alt (alt=""), aby čtečky obrazovky obrázek přeskočily.

Je obrázek odkaz nebo tlačítko? Alternativní text se stává textem odkazu. Popište cíl, ne obrázek. „Zobrazit cenové plány“ je lepší než „ikona šipky“.

Je obrázek složitý — graf, diagram nebo infografika? Alternativní text má praktické limity délky (zhruba 125 znaků je pro většinu čteček obrazovky pohodlných). Složité obrázky potřebují delší popisy, buď v popisku, v textu stránky, nebo přes aria-describedby.

Jak dobrý alternativní text ve skutečnosti zní

Dobrý alternativní text je konkrétní, stručný a zohledňuje kontext. Odpovídá na otázku: Proč je tento obrázek tady?

Špatně: „Obrázek grafu“

Lépe: „Spojnicový graf ukazující 23% nárůst mobilní návštěvnosti od ledna do března 2026“

Špatně: „Osoba používající notebook“

Lépe: „Designér kontroluje návrhy webu ve Figma“

Špatně: „Klikněte sem“

Lépe: „Stáhnout úplný kontrolní seznam auditu přístupnosti (PDF)“

Všimněte si, že dobrý alternativní text často obsahuje čísla, akce nebo výsledky. Nepopisuje každý vizuální detail. Popisuje to, na čem záleží.

U dekorativních obrázků — textur na pozadí hero sekcí, ozdobných okrajů, čistě estetických ilustrací — použijte alt="". Není to lenost. Je to sémantická poctivost. Čtečky obrazovky obrázek úplně přeskočí, což je přesně to, co chcete.

Časté chyby, které všem berou čas

Začínat slovy „Obrázek“ nebo „Fotografie“: Čtečky obrazovky už oznamují, že jde o obrázek. Přejděte rovnou k popisu.

Přeplňování klíčovými slovy kvůli SEO: Alternativní text není místo, kam nacpat „nejlepší bio kávová zrna Brooklyn řemeslně pražená“. Google umí takové věci v obrázkovém vyhledávání rozpoznávat už roky. Pište pro lidi.

Popisovat název souboru: „IMG_3847.jpg“ nikomu nepomůže. Stejně tak „hero-banner-final-v3“.

Psát román: Pokud je váš alternativní text delší než dvě věty, informace pravděpodobně patří spíše do popisku nebo do hlavního textu.

Opakovat sousední text: Pokud nadpis říká „Jak upéct kváskový chléb“ a obrázek ukazuje někoho, kdo tvaruje těsto, alternativní text nemusí nadpis opakovat. Popište to, co je vizuálně odlišné: „Ruce překládají kváskové těsto na pomoučené ploše.“

Nástroje a pracovní postupy, které skutečně pomáhají

Většina moderních CMS dnes má pole pro alternativní text zabudovaná. WordPress, Webflow, Contentful a Sanity atribut alt při nahrávání výrazně zobrazují. To, že je pole viditelné, ale neznamená, že bude dobře vyplněné.

Pokud auditujete web kvůli chybějícímu nebo nekvalitnímu alternativnímu textu, rozšíření prohlížeče jako Accessibility Insights nebo axe DevTools umějí označit obrázky bez atributů alt. Pro rychlou ruční kontrolu vypněte v prohlížeči obrázky (Firefox i Chrome to podporují) a stránku si přečtěte. Pokud alternativní text dává v kontextu smysl, jste na dobré cestě.

Alternativní text generovaný AI — dostupný v nástrojích jako Azure Computer Vision, Google Cloud Vision nebo integrovaný v platformách jako Cloudflare Images — může být rozumným výchozím bodem, zejména u velkých knihoven obrázků. Berte ale AI alternativní text jako první návrh. Přesně popíše obsah obrázku, ale nebude vědět, proč je obrázek na stránce. Kontext musí stále doplnit lidský editor.

Pokud pracujete na webu s intenzivním využitím obrázků a chcete včas zachytit problémy s výkonem, nástroje jako Wux Webtools' Image Compressor vám mohou pomoci optimalizovat velikosti souborů před nahráním — protože alternativní text je užitečný jen tehdy, když se obrázek skutečně načte.

Alternativní text a SEO v roce 2026

Google už roky říká, že alternativní text je hodnoticím faktorem pro vyhledávání obrázků. To stále platí. Optimalizace pro vyhledávání obrázků ale není totéž co přístupnost.

Pokud budete psát alternativní text primárně pro SEO, skončíte u nesmyslů přeplněných klíčovými slovy, které uživatelům čteček obrazovky ztíží orientaci na stránce. Pokud budete psát alternativní text nejdřív pro přístupnost, přínosy pro SEO přijdou přirozeně, protože popisný, kontextový alternativní text je přesně to, co se algoritmus vyhledávání obrázků Google snaží zobrazovat.

Jedna nuance: Google Images dnes používá okolní obsah stránky mnohem výrazněji než dřív. Pokud je váš alternativní text dobrý, ale obecný („čokoládový dort s polevou“), a vaše stránka je o veganském pečení, Google kontext pochopí. Nemusíte psát „veganský čokoládový dort s polevou bez mléčných výrobků“, pokud tento rozdíl není na obrázku vizuálně zřejmý.

Klíčové poznatky

• Alternativní text existuje proto, aby předal účel obrázku, ne aby popsal každý vizuální detail
• Dekorativní obrázky by měly používat alt="", aby je čtečky obrazovky úplně přeskočily
• Dobrý alternativní text je konkrétní, zohledňuje kontext a odpovídá na otázku „proč je tento obrázek tady?“
• Alternativní text generovaný AI je užitečný výchozí bod, ale kvůli kontextu stále potřebuje lidskou úpravu
• Pište nejdřív pro přístupnost; přínosy pro SEO přirozeně plynou z jasného, popisného textu

FAQ

Q: Můžu jednoduše použít AI k vygenerování všech alternativních textů?

A: Nástroje AI dobře popisují, co je na obrázku, ale nerozumějí kontextu. Pokud pracujete se stovkami produktových obrázků a potřebujete základní verzi, AI alternativní text je v pořádku. U redakčního obsahu, marketingových stránek nebo čehokoli, kde záleží na důvodu, proč obrázek existuje, ho musí zkontrolovat a upravit člověk.

Q: Jak dlouhý by měl alternativní text být?

A: Většině čteček obrazovky vyhovuje 125 znaků nebo méně. Pokud potřebujete více, informace pravděpodobně patří do popisku, do hlavního textu nebo do delšího popisu propojeného přes aria-describedby. Neexistuje pevný technický limit, ale delší alternativní text se hůře prochází.

Q: Potřebuji alternativní text pro loga?

A: Ano, ale držte ho jednoduchý. Pokud je logo v hlavičce a odkazuje na domovskou stránku, alternativním textem by měl být název vaší společnosti: alt="Acme Corp". Nepište alt="Acme Corp logo", pokud skutečnost, že jde o logo, není pro kontext nějak relevantní.

Q: Jaký je rozdíl mezi alternativním textem a popiskem?

A: Alternativní text je přímou náhradou obrázku. Čtečky obrazovky ho přečtou, když na obrázek narazí. Popisek je doplňující informace viditelná pro všechny, která přidává kontext nebo uvedení zdroje. Pokud máte obojí, neměly by se navzájem opakovat.

Q: Mám přidávat alternativní text k obrázkům na pozadí v CSS?

A: Ne. Obrázky na pozadí v CSS jsou z definice dekorativní a čtečkám obrazovky se nezpřístupňují. Pokud obrázek na pozadí předává důležitou informaci, měl by být v HTML jako prvek <img> se správným alternativním textem.

Zdroje

• W3C Web Accessibility Initiative: Images Tutorial
• WebAIM: Alternative Text
• Nielsen Norman Group: Alt Text for Images
• Google Search Central: Image SEO Best Practices