Obrázky bez alternativního textu

Na každé živé stránce se spočítají obrázky a z nich ty, kterým atribut alt úplně chybí. Nález vznikne, když je podíl chybějících vyšší než 20 %. Práh je v config/thresholds.json pod rule_engine.STR-05 jako max_missing_alt_ratio: 0.2 a je tam označený "_status": "PROPOSAL": je to náš odhad k revizi, ne číslo ze zadání. Důvod pro práh je prostý: u jednoho obrázku z padesáti nemá smysl zvedat nález, u poloviny ano.

Prázdný alt="" se jako chybějící nepočítá a to je důležité. Je to platný a správný zápis pro dekorativní obrázek: autor jím čtečce i modelu říká „tenhle obrázek nenese informaci, přeskoč ho“. Web, který dekorativní obrázky poctivě označuje, se za to trestat nesmí.

Co kontrola nedělá:

• Neposuzuje kvalitu popisku. alt="obrazek", alt="IMG_2931.jpg" nebo alt="." projdou stejně jako pečlivý popis. Tohle je nejčastější způsob, jak nález „opravit“ a nezlepšit nic.
• Nepozná obrázky vložené přes CSS (background-image). Ty alt mít nemohou, a když v nich nesete obsah, je to problém, o kterém tahle kontrola mlčí.
• Nerozlišuje důležitost obrázku. Ikona v patičce váží stejně jako fotografie produktu.
• Nekontroluje <svg> ani <canvas>, byť u nich přístupný název chybět nemá.
• Neběží na stránkách s chybovým stavem.

Nález je na úrovni stránky, závažnost varování. Podrobnou analýzu přístupnosti dělá samostatný modul auditu s vlastními kódy A11Y-…; tahle kontrola je hrubé síto v základní sadě.

Rozdělíme to podle toho, komu alternativní text slouží, protože síla důkazu se pro každou skupinu liší a slévat je dohromady by bylo nepoctivé.

Třída celého nálezu je proto „efekt nedoložený“: myšleno pro viditelnost v AI, což je to, co tenhle audit slibuje. Neznamená to, že je alternativní text zbytečný. Znamená to, že důvod, proč ho doplnit, je jinde, než kde ho bývá zvykem hledat.

A ten důvod stojí za víc než naše skóre. Alternativní text je jediná věc z celého auditu, kterou dlužíte konkrétním lidem, ne algoritmu. Kdyby vás z tohohle nálezu mělo zaujmout jedno, tak tohle.

Nejdřív u každého obrázku rozhodněte, do které ze dvou skupin patří. Není to o tom, jak je důležitý, ale jestli nese informaci, která v textu jinak není:

1. Obsahový obrázek: fotka produktu, graf, snímek obrazovky, infografika. Potřebuje alt s popisem toho, co je na něm podstatné.
2. Dekorativní obrázek: oddělovač, ozdobné pozadí, ikona vedle textu, který říká totéž. Patří mu alt="", prázdný, ne vynechaný.

Pro první skupinu platí jedno měřítko, které funguje líp než jakékoli pravidlo o délce: napište to, co byste řekli po telefonu člověku, který obrázek nevidí.

<!-- Špatně -->
<img src="graf.png">
<img src="graf.png" alt="graf">
<img src="graf.png" alt="graf prodeje obrázek diagram statistika">

<!-- Dobře -->
<img src="graf.png" alt="Prodeje vzrostly ze 120 kusů v lednu na 340 v červnu.">

<!-- Dekorativní: prázdný alt, ne vynechaný -->
<img src="oddelovac.svg" alt="">

Na co dát pozor:

• Nezačínejte „obrázek…“ ani „fotka…“. Čtečka už ohlásila, že jde o obrázek; opakovat to znamená zdvojit informaci.
• U grafu popište závěr, ne vzhled. „Sloupcový graf se šesti sloupci“ nikomu nepomůže; „Prodeje vzrostly trojnásobně“ ano.
• Když je obrázek zároveň odkaz, popisuje alt cíl odkazu, ne obrázek. U loga v hlavičce tedy alt="Domů" nebo název webu, ne „logo“.
• Nenacpávejte klíčová slova. Je to jedna z mála věcí, které Google ve své dokumentaci výslovně odrazuje.
• Nikdy nedoplňujte alt hromadně skriptem. alt="obrazek" na tisíci obrázcích nález odstraní a nikomu nepomůže, a od téhle chvíle vypadá web opravený, přestože není.

A stejně jako u ostatních strukturálních nálezů: opravujte šablonu. Chybějící alt u karty produktu obvykle znamená jednu šablonu a tisíc zasažených stránek.