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

Požadavek WCAG A/AA Priorita: Střední

Některé grafické prvky nemají textový popis

Některé prvky jsou označené jako obrázky, ale nemají textovou alternativu, například hvězdičkové hodnocení nebo grafické ikony.

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 se nedozví, co grafika ukazuje, například hodnocení 4.5 hvězdičky nebo štítek „doprava zdarma“, což může ovlivnit rozhodnutí o nákupu.

Koho se to týká

  • nevidomí zákazníci
  • uživatelé čteček obrazovky

Jak to opravit

Dejte každému prvku s role="img" název pomocí aria-label nebo aria-labelledby, například aria-label="Hodnocení 4.5 z 5". Pokud je grafika dekorativní, odstraňte role="img" a skryjte ji pomocí aria-hidden="true".

V Shopify

Často jde o hvězdičky z aplikací pro recenze nebo ikony v šabloně. Doplňte názvy ve snippetech Liquid šablony; kód aplikací pro recenze musí opravit jejich vývojář.

V Shoptet (CZ)

Často jde o hodnocení nebo ikony v šabloně. Nahlaste to podpoře Shoptet nebo partnerovi.

V PrestaShop

Často jde o hodnocení nebo ikony z modulů. Opravte to v přepsaných šablonách modulů, nebo to nahlaste vývojáři modulu.

V WooCommerce

Často jde o hvězdičky z WooCommerce nebo pluginů pro recenze, případně o ikonové fonty v šabloně. Opravte to v šablonách podřízené šablony (child theme), nebo to nahlaste autorovi pluginu.

Normy

Normy
NormaBod
WCAG 2.2 1.1.1 (A) Non-text Content
WCAG 2.1 1.1.1 (A) Non-text Content
WCAG 2.0 1.1.1 (A) Non-text Content
EN 301 549 4.1.1 9.1.1.1
EN 301 549 3.2.1 9.1.1.1
Section 508 2017 E205.4
ДСТУ EN 301 549 2022 9.1.1.1

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

Podobné kontroly

Všechna pravidla, která kontrolujeme