This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Přístupnost
Proč potřebuje každý obrázek na webové stránce alternativní text?
Každý obrázek potřebuje alternativní text, protože nevidomí lidé i vyhledávače dokážou obsah obrázku pochopit jen prostřednictvím tohoto textu. Čtecí program přečte alternativní text nahlas, Google zobrazuje ve vyhledávání obrázků ty s dobrým alternativním textem. Pokud text chybí, nevidomý návštěvník uslyší jen název souboru — třeba „DSC_0042.jpg“ — a nic nepochopí.
Alternativní text: slovní popis obrázku
Alternativní text je krátká věta, která je ve zdrojovém kódu stránky připojena k obrázku. Vidící návštěvníci ho nikdy neuvidí. Nevidomému návštěvníkovi si stránku přečte hlasový čtecí program — a na místě obrázku program přečte právě tento text. Příklad: stránka vašeho týmu zobrazuje fotografii jednatelky. S alternativním textem „Portrét Marie Hubové, jednatelky“ návštěvník ví, koho má před sebou. Bez textu zůstane jen prázdné místo. Tento text čte i Google a díky němu chápe, co je na obrázku vidět — to pomáhá vaší viditelnosti ve vyhledávání obrázků.
Jak naše měřicí jádro kontroluje alternativní texty
Automatická kontrola otevře stránku ve skutečném prohlížeči a nástrojem axe-core prozkoumá každý jednotlivý obrázek. Náš vlastní kontrolní krok navíc spočítá všechny obrázky, kterým atribut alt zcela chybí — každý z nich je doložené porušení, které zpráva doloží názvem souboru. Naproti tomu záměrně prázdný alternativní text je v pořádku: takto se označují čistě dekorativní obrázky, které má čtecí program přeskočit. Zda existující text obsahově odpovídá, nedokáže rozhodnout žádný stroj — proto automatika zde nikdy unáhleně nepotvrdí „vyhovuje“. U zlatého standardu se obrázky a jejich texty podívá a posoudí člověk.
Jak psát dobré alternativní texty
Dobrý alternativní text popisuje, co je na obrázku vidět a k čemu na dané stránce slouží — v jedné větě, bez fráze „obrázek…“. U produktové fotografie: „Černá kancelářská židle s opěrkami rukou, boční pohled“. U prolinkovaného loga se počítá cíl odkazu: „Na úvodní stránku“. Čistě dekorativní obrázky — oddělovací čáry, vzory na pozadí — dostanou prázdný alternativní text, aby je čtecí program tiše přeskočil. Názvy souborů, seznamy klíčových slov nebo reklamní texty do alternativního textu nikdy nepatří: návštěvník slyší každé písmeno a ztrácí čas.
Příklady
Fotografie s informacemi
<img src="team-2026.jpg">
<img src="team-2026.jpg" alt="Bild">
<img src="team-2026.jpg" alt="DSC_0042.jpg"><img src="team-2026.jpg"
alt="Das Team von Beispiel GmbH vor dem Büro in Graz, sechs Personen">Alternativní text říká, co obrázek ukazuje, v jedné větě. Jméno souboru a slovo "image" nic neříkají.
Šperky obrázek a propojený obrázek
<img src="trenner.svg" alt="Trennlinie">
<a href="/"><img src="logo.svg"></a><img src="trenner.svg" alt="">
<a href="/"><img src="logo.svg" alt="Beispiel GmbH – zur Startseite"></a>Šperky mají prázdný starý pro čtení programů přeskočit. Související obraz volá cíl.
- Zkontrolujte své nejdůležitější stránky: má každý obrázek alternativní text, který v jedné větě popisuje obsah?
- Požádejte svou agenturu, aby vypsala obrázky bez atributu alt a doplnila je.
- Dekorativní obrázky označte prázdným alternativním textem, aby je čtecí programy přeskočily.
- Ve své redakci si stanovte pravidlo: žádný obrázek nejde online bez alternativního textu.
- Přečtěte si své alternativní texty nahlas — pokud stránce rozumíte i bez obrázků, texty jsou dobré.
