WCAG 2.4.4 Účel odkazu (v kontextu)

Kritérium úspěšnosti 2.4.4 pomáhá lidem rozhodnout se, zda odkaz otevřít, aniž by museli hádat. Uživatelé čteček obrazovky si často zobrazí seznam všech odkazů na stránce a uživatelé klávesnice přecházejí z odkazu na odkaz; seznam deseti odkazů „Klikněte zde“ jim nic neřekne. Jde o úroveň A a je součástí normy EN 301 549 (článek 9.2.4.4). Na harmonizovanou normu EN 301 549 odkazuje i český zákon č. 424/2023 Sb.

Co kritérium vyžaduje

Účel každého odkazu lze určit z:

• samotného textu odkazu, nebo
• textu odkazu spolu s jeho programově určeným kontextem odkazu —

s výjimkou případů, kdy by účel odkazu byl nejednoznačný pro uživatele obecně.

Kontext odkazu jsou informace, které asistivní technologie dokážou s odkazem spojit: stejná věta, odstavec, položka seznamu nebo buňka tabulky, záhlaví tabulky dané buňky nebo text odkazovaný pomocí aria-describedby. Počítá se i přístupný název odkazu — u odkazu z obrázku je to alternativní text obrázku.

Výjimka se týká odkazů, jejichž účel nemůže ze stránky zjistit nikdo, například odkaz v hádance; pak další kontext potřeba není.

Typické chyby v e-shopu

• odkazy jen s ikonou (košík, účet, seznam přání, sociální sítě) bez textu a bez aria-label;
• odkazy z obrázků produktů, kde obrázek nemá alternativní text, takže odkaz nemá vůbec žádný název;
• několik odkazů „Číst více“, „Nakoupit“ nebo „Podrobnosti“ v mřížce bez vazby na název produktu;
• odkazovaná oblast obrázkové mapy (<area>) bez alt;
• odkazy, jejichž textem je holá URL nebo sledovací kód.

Jak to zkontrolovat

Automaticky: náš nástroj hlásí odkazy bez rozpoznatelného textu (pravidlo název odkazu) a oblasti obrázkových map bez alternativního textu. Neumí posoudit, zda je název jako „Více“ v kontextu jasný, proto nejednoznačné texty odkazů vyžadují ruční kontrolu.

Ručně: použijte seznam odkazů ve čtečce obrazovky (nebo rozšíření prohlížeče, které odkazy vypíše) a přečtěte si každý odkaz mimo kontext. Pokud je odkaz nejasný, ověřte, zda ho objasňuje jeho věta, položka seznamu, buňka tabulky nebo nadpis. Zvlášť zkontrolujte odkazy s ikonou a odkazy z obrázků.

Jak to opravit

• Pište text odkazu, který říká, kam vede: „Zobrazit ceny dopravy“ místo „Klikněte zde“.
• Na kartách produktů udělejte odkazem název produktu, nebo opakovaným odkazům přidejte kontext: Nakoupit<span class="visually-hidden"> – Lněná košile</span>.
• Odkazům s ikonou dejte přístupný název pomocí viditelného textu, vizuálně skrytého textu nebo aria-label.
• U obrázků, které jsou odkazem, pište alternativní text, který popisuje cíl, ne jen obrázek.
• Každé <area> v obrázkové mapě přidejte alt.

Související kritéria

• 2.5.3 Popisek v názvu — přístupný název musí obsahovat viditelný text.
• 2.4.6 Nadpisy a popisky — nadpisy a popisky musí být popisné.
• 1.1.1 Netextový obsah — obrázky potřebují textové alternativy.

Časté otázky

Jsou podle WCAG 2.4.4 povoleny odkazy „Číst více“?

Ano, pokud je jejich účel jasný z programově určeného kontextu, například ze stejné věty, odstavce, položky seznamu nebo buňky tabulky, nebo z nadpisu, pod kterým odkaz je. Text odkazu, který dává smysl sám o sobě, je přesto lepší.

Co je programově určený kontext odkazu?

Informace, které asistivní technologie dokážou s odkazem spojit, například okolní věta, odstavec, položka seznamu nebo buňka tabulky, nebo text navázaný na odkaz pomocí aria-describedby nebo aria-labelledby.

Porušují odkazy s ikonou 2.4.4?

Odkaz s ikonou bez přístupného názvu, například ikona košíku nebo sociální sítě bez textu nebo aria-label, nemá účel, který by šlo určit. Dejte mu název jako „Košík“ nebo „Instagram“.