# Kontrola alternativního textu obrázků Zadejte adresu stránky a vypíšeme každý obrázek na ní s jeho alternativním textem, načteným ve skutečném prohlížeči poté, co doběhnou skripty. Uvidíte, které obrázky alternativní text nemají, které jsou označené jako dekorativní a u kterých alternativní text nic nepopisuje. ## Co tento nástroj kontroluje - Obrázky bez alternativního textu: Každý prvek img a obrázkové tlačítko bez atributu alt a bez jiného přístupného názvu, například aria-label. - Obrázky v odkazech, kvůli kterým odkaz nemá název: Loga a ikony uvnitř odkazů nebo tlačítek, které nemají alternativní text ani jiný text, takže čtečka obrazovky může oznámit jen „odkaz“. - Alternativní text, který vypadá jako název souboru: Hodnoty jako IMG_2041.jpg, DSC0042 nebo dlouhý řetězec číslic, které mnoho systémů vyplní automaticky při nahrání. - Obecná slova: Alternativní text, který zní jen „obrázek“, „fotka“, „logo“ nebo „banner“, nikomu neřekne, co obrázek zobrazuje. - Nadbytečný a opakovaný text: Popisy, které začínají slovy jako „obrázek znázorňující“, opakují sousední text odkazu nebo se opakují u tří a více různých obrázků. - Dekorativní a skryté obrázky: Obrázky označené alt="" nebo role="presentation" a obrázky skryté pomocí aria-hidden nebo CSS jsou uvedené zvlášť, abyste mohli potvrdit, že je každý z nich opravdu dekorativní. - Náhled každého obrázku: Miniatura vedle alternativního textu, díky které každý popis posoudíte během několika sekund. Filtry zobrazí jen problémy nebo jen to, co je třeba zkontrolovat. ## Co zkontrolovat nedokáže - Posoudit, zda je alternativní text výstižný. To dokáže jen člověk, který obrázek vidí a ví, proč je na stránce. - Zkontrolovat obrázky nastavené jako pozadí v CSS ani textové alternativy grafiky SVG a canvas. Vypisuje prvky img a obrázková tlačítka. - Zkontrolovat obrázky uvnitř rámců, například vložená videa, mapy a reklamy. - Vypsat víc než 150 obrázků. Na velmi dlouhých stránkách zobrazí prvních 150 a uvede, kolik jich je celkem. - Otestovat další stránky. Plný bezplatný sken kontroluje alternativní texty spolu se zbytkem WCAG až na pěti klíčových stránkách. ## Proč na tom záleží Alternativní text je to, co čtečka obrazovky přečte místo obrázku, a to, co prohlížeč zobrazí, když se obrázek nenačte. Kritérium úspěšnosti 1.1.1 WCAG 2.2 na úrovni A vyžaduje textovou alternativu pro každý obrázek, který nese informaci, a prázdnou alternativu pro obrázky, které ji nenesou. Chybějící alternativní text je druhou nejčastější chybou přístupnosti na webu: analýza WebAIM z roku 2026 ho našla na 53,1 % domovských stránek milionu nejnavštěvovanějších webů a 16,2 % všech zkontrolovaných obrázků ho nemělo vůbec. Čtou ho i vyhledávače. Google uvádí, že alternativní text používá spolu s počítačovým viděním a obsahem stránky k pochopení obrázků a že alternativní text obrázku v odkazu funguje jako text odkazu (anchor text). ## Jak číst výsledky - Bez alternativního textu: Obrázek nemá atribut alt ani jiný název. Podle softwaru může čtečka obrazovky přečíst název souboru, nebo obrázek přeskočit. - Dekorativní: alt="" nebo role="presentation": čtečky obrazovky obrázek přeskočí. Správné u dekorace, chybné u obrázku, který nese informaci nebo je jediným obsahem odkazu. - Má alternativní text: Obrázek má popis. Označujeme ty, které vypadají chybně; u ostatních musí výstižnost i tak ověřit člověk. - Název z ARIA nebo title: Chybí atribut alt, ale název pochází z aria-label, aria-labelledby nebo title. Automatickými testy to projde; spolehlivější volbou je přesto alt. - Skrytý: Obrázek se nezobrazuje, nebo je pomocí aria-hidden skrytý před asistivními technologiemi. Není co opravovat, pokud obrázek nemá být vidět. - Odkaz bez názvu: Odkaz nebo tlačítko, jehož jediným obsahem je obrázek bez textové alternativy. Je to chyba, i když je samotný obrázek dekorativní. - Ověřit: Alternativní text, který vypadá jako název souboru nebo obecné slovo, začíná slovy jako „obrázek znázorňující“, opakuje text odkazu, je velmi dlouhý nebo se opakuje u více obrázků. ## Jak opravit nejčastější problémy - Produktové a obsahové fotografie: Popište v kontextu stránky to, o co by bez obrázku někdo přišel. U produktu: předmět, jeho barvu a zobrazený pohled. U fotografie v článku: to, co ukazuje a co neříká text. - Loga, která vedou na domovskou stránku: Obrázek v odkazu by měl říkat, kam odkaz vede. U loga, které odkazuje na domovskou stránku, použijte název firmy, například alt="Acme – úvodní stránka", ne „logo“. - Ikony v odkazech a tlačítkách: Dejte ikoně alternativní text, který pojmenuje akci, například „Hledat“ nebo „Košík“, nebo dejte odkazu aria-label a ikonu označte jako dekorativní pomocí alt="". - Dekorativní obrázky: Použijte alt="" (prázdnou hodnotu, ne chybějící atribut) u oddělovačů, ozdob v pozadí a obrázků, které opakují text hned vedle sebe. - Názvy souborů vyplněné platformou: Mnoho platforem při nahrání zkopíruje název souboru do pole alt. Opravte ho tam, kde obrázek spravujete: v Shopify u médií produktu, ve WordPressu v poli Alternativní text v knihovně médií. - Grafy a infografiky: Dejte jim krátký alternativní text, který řekne, co graf ukazuje, a data nebo shrnutí uveďte v textu nebo v tabulce vedle něj. ## Často kladené otázky ### Co je alternativní text? Atribut alt obrázku obsahuje jeho textovou alternativu. Čtečky obrazovky ho čtou nahlas a prohlížeče ho zobrazí, když obrázek nejde zobrazit. ### Má mít alternativní text každý obrázek? Každý prvek img by měl mít atribut alt. U obrázku, který nese informaci, obrázek popisuje; u dekorativního obrázku by měl být prázdný (alt=""), aby ho čtečky obrazovky přeskočily. ### Jak dlouhý má být alternativní text? WCAG žádný limit nestanovuje. Dobrý alternativní text bývá krátká fráze nebo věta. Pokud obrázek potřebuje víc, popište ho v textu stránky nebo v popisku a alternativní text nechte krátký. Alternativní texty delší než 150 znaků označujeme k dalšímu posouzení. ### Pomáhá alternativní text SEO? Google uvádí, že alternativní text používá spolu s počítačovým viděním a obsahem stránky k pochopení obrázků a že alternativní text obrázku v odkazu funguje jako text odkazu. Zároveň varuje, že přeplňování atributů alt klíčovými slovy může být považováno za spam. ### Je atribut title totéž co alt? Ne. title se zobrazuje jako bublina po najetí myší, čtečky obrazovky ho spolehlivě neoznamují a na dotykových obrazovkách není dostupný. Automatické testy ho přijmou jako název, když alt chybí, ale spolehlivou volbou je alt. ### Může mi alternativní texty napsat AI? Může připravit návrhy popisů, ale neví, proč je obrázek na vaší stránce. Každý návrh zkontrolujte: správný alternativní text závisí na kontextu, který znáte jen vy. ## Zdroje - [W3C: Vysvětlení kritéria úspěšnosti WCAG 2.2 1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content) - [W3C Images Tutorial: rozhodovací strom pro atribut alt](https://www.w3.org/WAI/tutorials/images/decision-tree/) - [W3C Images Tutorial: funkční obrázky](https://www.w3.org/WAI/tutorials/images/functional/) - [Google Search Central: osvědčené postupy SEO pro obrázky](https://developers.google.com/search/docs/appearance/google-images) - [Deque: pravidlo image-alt v axe-core](https://dequeuniversity.com/rules/axe/4.13/image-alt) - [WebAIM: The WebAIM Million (2026)](https://webaim.org/projects/million/)