ALT (Alternativní text)

Co je to ALT text?

ALT text, zkráceně ALT nebo také alternativní text, je HTML atribut, který poskytuje textový popis obsahu obrázku na webové stránce. Tento atribut se zapisuje jako alt="" v rámci HTML tagu <img> a slouží hned několika důležitým účelům. Primárně zpřístupňuje vizuální obsah nevidomým a slabozrakým uživatelům, kteří používají čtečky obrazovky – software, který jim předčítá obsah webu. Bez kvalitního ALT textu by pro tyto uživatele obrázky zůstaly zcela nepřístupné.

Kromě přístupnosti má ALT text klíčovou roli v SEO optimalizaci. Vyhledávače jako Google nedokážou „vidět" obsah obrázků stejně jako lidé – místo toho čtou ALT text, aby pochopily, co obrázek zobrazuje. Správně napsaný ALT text tak pomáhá vašim obrázkům objevit se ve vyhledávání obrázků Google a zlepšuje celkovou relevanci stránky pro cílová klíčová slova. Třetím využitím je zobrazení textového popisu v případech, kdy se obrázek z nějakého důvodu nenačte – ať už kvůli pomalému připojení, chybě na serveru nebo blokování obrázků v prohlížeči.

Z technického hlediska je ALT text povinný atribut každého tagu <img> podle HTML standardů. V praxi však mnoho webů tento atribut zanedbává nebo používá nesprávně, čímž přichází o významný benefit pro uživatelskou zkušenost, přístupnost i vyhledávače. Dobře optimalizovaný web by měl mít kvalitní ALT texty u všech obsahových obrázků, zatímco u čistě dekorativních prvků je lepší použít prázdný atribut alt="", který říká čtečkám obrazovky, aby daný element přeskočily.

Jak ALT text funguje v praxi?

Když čtečka obrazovky (například NVDA, JAWS nebo VoiceOver) narazí na obrázek, přečte nahlas obsah ALT atributu. Pro uživatele, který web nevidí, je to jediný způsob, jak získat informaci o tom, co obrázek zobrazuje. Kvalitně napsaný ALT text umožňuje těmto uživatelům plně porozumět obsahu stránky a neztrácet důležité informace. Například místo obecného „obrázek" by ALT text měl říct „ukázka responzivního webdesignu na mobilním telefonu a počítači".

Z hlediska SEO vyhledávače používají ALT text jako signál pro pochopení kontextu obrázku a celé stránky. Google Image Search indexuje obrázky primárně na základě ALT textu, názvu souboru a okolního kontextu. To znamená, že kvalitní ALT texty mohou přivést organickou návštěvnost z vyhledávání obrázků, což je často podceňovaný zdroj trafficu. Navíc, pokud obrázky obsahují důležité informace (grafy, infografiky, produktové fotografie), ALT text pomáhá vyhledávačům pochopit komplexní kontext stránky.

Technicky se ALT text implementuje jednoduše jako atribut v HTML kódu: <img src="logo-webouky.png" alt="Logo webdesignového studia Webouky">. V WordPressu a dalších CMS je možné ALT text vyplnit přímo při nahrávání obrázku do knihovny médií nebo editoru blogu. Moderní nástroje pro web development často upozorňují na chybějící ALT texty, protože to je jeden z nejčastějších problémů přístupnosti.

Jak správně psát ALT text

• Buďte konkrétní a popisní

Místo „žena" napište „mladá žena v černém obleku prezentující webdesign klientovi v moderní kanceláři". Konkrétní popis poskytuje kontext a hodnotu.

• Začleňte klíčová slova přirozeně

Pokud je obrázek relevantní k vašemu cílovému klíčovému slovu, zahrňte ho do ALT textu. Ale nesmí to znít nucené nebo být keyword stuffing. „Responzivní webdesign na mobilním telefonu" je správně, „webdesign web design responzivní design" je spam.

• Držte se rozumné délky

Ideální délka je do 125 znaků, protože mnoho čteček obrazovky po tomto limitu text ořízne. Buďte struční, ale dostatečně popisní.

• Nepište "obrázek" nebo "fotka"

Čtečky obrazovky už ohlásí, že jde o obrázek, takže je zbytečné to opakovat. Místo „obrázek webu" prostě napište „ukázka webu pro restauraci".

• Poskytněte kontext podle účelu obrázku

Pro produktové fotografie v e-shopu uveďte název produktu a klíčové vlastnosti. Pro ilustrační obrázky v článku popište, jak se vztahují k textu. Pro grafy a infografiky shrňte hlavní data.

• Používejte prázdný ALT u dekorativních obrázků

Dekorativní prvky bez informační hodnoty (oddělovače, abstraktní pozadí) by měly mít alt="", ne chybějící atribut. Prázdný ALT říká čtečkám obrazovky: „tento obrázek přeskoč".

ALT text a SEO - Proč je důležitý pro vyhledávače?

Google výslovně potvrdil, že ALT text používá pro pochopení obsahu obrázků a zařazení webu do výsledků hledání. Weby s kvalitními ALT texty mají prokazatelně lepší pozice ve vyhledávání obrázků Google Images, což může přinést významný dodatečný traffic. Podle studií vyhledávání obrázků tvoří až 20-30% celkového vyhledávacího trafficu, zejména v oborech jako e-commerce, móda, design nebo cestování.

Kromě přímého vlivu na Google Image Search má ALT text i nepřímý dopad na běžné webové vyhledávání. Kvalitní ALT texty přispívají k celkové on-page SEO optimalizaci tím, že posilují témata a klíčová slova stránky. Pokud píšete článek o webdesignu a všechny obrázky mají relevantní ALT texty s přirozeným začleněním souvisejících termínů, Google lépe pochopí, že stránka je skutečně o webdesignu.

Z pohledu technického SEO jsou chybějící ALT texty často flagovány jako chyby v auditech přístupnosti a SEO. Nástroje jako Google Search Console, Screaming Frog nebo Lighthouse upozorňují na obrázky bez ALT atributu. Oprava chybějících ALT textů je jedním z nejrychlejších a nejjednodušších SEO vylepšení s měřitelným dopadem. Navíc chybějící ALT může znamenat horší pozice v Core Web Vitals a accessibility metrics, které Google používá pro ranking.

Nejčastější chyby při psaní ALT textů

• Úplné vynechání ALT atributu

Chybějící ALT je nejzávažnější problém přístupnosti. Každý <img> tag musí mít atribut alt, i kdyby byl prázdný.

• Kopírování názvu souboru

ALT text „IMG_3421.jpg" nebo „banner_final_v2.png" nepomáhá nikomu. Soubory pojmenovávejte rozumně a ALT text pište lidsky.

• Keyword stuffing

Nacpání klíčových slov: „webdesign tvorba webu webové stránky web" je spam, který Google penalizuje. Klíčová slova používejte přirozeně.

• Příliš dlouhé popisy

ALT text s 300 znaky je nepoužitelný pro čtečky obrazovky a působí jako spam. Držte se 125 znaků nebo méně.

• Stejný ALT text pro všechny obrázky

Každý obrázek je unikátní a měl by mít specifický popis. Generické „obrázek produktu" u každé položky v e-shopu je špatně.

• Používání ALT místo title atributu

ALT text se zobrazuje při nenačtení obrázku a čte se čtečkami. Title atribut se zobrazí při najetí myší. To jsou dva různé atributy s různými účely.

Praktické příklady ALT textů

E-shop s oblečením:
Špatně: „produkt.jpg"
Dobře: „Dámské modré džíny s vysokým pasem, velikost M"

Blog o webdesignu:
Špatně: „screenshot"
Dobře: „Ukázka mobilně responzivního designu e-shopu na iPhone a MacBooku"

Firemní web:
Špatně: „logo"
Dobře: „Logo společnosti XYZ - tvorba webových stránek"

Infografika:
Špatně: „graf"
Dobře: „Infografika znázorňující nárůst rychlosti webu o 40% po implementaci CDN"

Dekorativní prvek:
Špatně: „dekorace.png"
Dobře: alt="" (prázdný atribut pro čistě vizuální prvky)

Výhody a nevýhody používání ALT textů

Výhody:

• Zlepšení přístupnosti webu

Zpřístupňuje obsah nevidomým a slabozrakým uživatelům.

• Vyšší pozice ve vyhledávání obrázků

Přináší dodatečný organický traffic z Google Images.

• Lepší celkové SEO

Posiluje relevanci stránky pro cílová klíčová slova.

• Zobrazení při nenačtení obrázku

Uživatelé vidí popis i když se obrázek nenačte.

• Splnění standardů přístupnosti

WCAG (Web Content Accessibility Guidelines) vyžaduje ALT texty.

• Lepší kontext pro vyhledávače

Google lépe pochopí obsah a téma stránky.

Nevýhody:

• Časová náročnost

Psaní kvalitních ALT textů pro desítky či stovky obrázků zabere čas.

• Riziko přeoptimalizace

Špatně napsané ALT texty s keyword stuffingem mohou uškodit SEO.

• Nutnost údržby při změnách

Pokud měníte obrázky, musíte aktualizovat i ALT texty.

Související pojmy