Přejít na obsah
Pandus
cs Změnit jazyk
Menu

Požadavek WCAG A/AA Priorita: Závažné

Klikatelné oblasti obrázku nemají popis

Stránka používá obrázkovou mapu (jeden obrázek rozdělený na několik klikatelných oblastí) a některé oblasti nemají text, který říká, kam vedou.

Tento text byl přeložen automaticky a rodilý mluvčí ho zatím nezkontroloval.

Proč na tom záleží vašim zákazníkům

Uživatelé čteček obrazovky slyší jen „odkaz“ nebo adresu souboru, například u banneru s odkazy na různé kategorie nebo u tabulky velikostí rozdělené na zóny. Nemohou vybrat správnou oblast a mohou přijít o akce nebo stránky produktů.

Koho se to týká

  • nevidomí zákazníci
  • uživatelé čteček obrazovky
  • uživatelé hlasového ovládání

Jak to opravit

Dejte každému prvku <area> s atributem href krátký alternativní text, který pojmenuje cíl, například alt="Dámská obuv". Ještě lepší je nahradit obrázkovou mapu běžnými odkazy nebo tlačítky nad obrázkem či pod ním; ty navíc lépe fungují na mobilu.

V Shopify

V šablonách Shopify vzácné. Obvykle jde o starý HTML vložený do stránky, článku blogu nebo popisu produktu, případně o aplikaci pro obrázkové mapy. Upravte HTML v editoru nebo požádejte vývojáře aplikace o doplnění alternativního textu ke každé oblasti.

V Shoptet (CZ)

V šablonách Shoptet vzácné. Obvykle jde o HTML vložený do stránky nebo popisu v administraci; doplňte alternativní text tam, nebo se obraťte na partnera Shoptetu, pokud je kód součástí šablony.

V PrestaShop

Obvykle HTML vložený do CMS stránek nebo popisů produktů, případně modul bannerů. Doplňte alternativní text ke každému <area> v editoru administrace nebo v šabloně modulu.

V WooCommerce

Obvykle starý HTML na stránkách nebo v popisech produktů, případně plugin pro obrázkové mapy či „hotspoty“. Doplňte alternativní text ke každé oblasti v editoru nebo nastavení pluginu, nebo to nahlaste autorovi pluginu.

Normy

Normy
NormaBod
WCAG 2.2 2.4.4 (A) Link Purpose (In Context)
WCAG 2.2 4.1.2 (A) Name, Role, Value
WCAG 2.1 2.4.4 (A) Link Purpose (In Context)
WCAG 2.1 4.1.2 (A) Name, Role, Value
WCAG 2.0 2.4.4 (A) Link Purpose (In Context)
WCAG 2.0 4.1.2 (A) Name, Role, Value
EN 301 549 4.1.1 9.2.4.4
EN 301 549 4.1.1 9.4.1.2
EN 301 549 3.2.1 9.2.4.4
EN 301 549 3.2.1 9.4.1.2
Section 508 2017 E205.4
ДСТУ EN 301 549 2022 9.2.4.4
ДСТУ EN 301 549 2022 9.4.1.2

Automatická kontrola: pravidlo axe-core area-alt. dequeuniversity.com, github.com, www.w3.org, www.w3.org

Podobné kontroly

Všechna pravidla, která kontrolujeme