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

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

Některé popisky jsou tam, kde je čtečky obrazovky ignorují

Některé prvky používají atributy přístupnosti, které jsou pro jejich typ zakázané, nejčastěji aria-label na obyčejném <div> nebo <span> bez role.

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

Čtečky obrazovky takové popisky často přeskakují. Hodnocení hvězdičkami zapsané jako aria-label="4,5 z 5", ikona „Akce“ nebo štítek dostupnosti pak neřekne nic, nebo něco jiného, než vidí ostatní zákazníci.

Koho se to týká

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

Jak to opravit

Nedávejte aria-label ani aria-labelledby na prvky bez vhodné role (obyčejné div, span, p nebo prvky s role="presentation"). Místo toho uveďte informaci jako text, například ve vizuálně skrytém <span>, nebo dejte prvku vhodnou roli, například role="img" u hodnocení složeného z ikon hvězdiček.

V Shopify

Obvykle kód recenzí, štítků nebo ikon v šabloně či aplikacích. Upravte úryvek Liquid na vizuálně skrytý text nebo role="img"; widgety aplikací nahlaste vývojáři.

V Shoptet (CZ)

Obvykle hodnocení, štítky nebo ikony v šabloně či doplňcích. Nahlaste to Shoptetu nebo partnerovi Shoptetu.

V PrestaShop

Obvykle hodnocení, štítky nebo ikony v šabloně či modulech. Opravte to v šablonách .tpl nebo v přepsaných šablonách modulů.

V WooCommerce

Obvykle hodnocení hvězdičkami, štítky nebo ikony v šabloně, page builderu nebo pluginech recenzí. Opravte to v podřízené šabloně nebo to nahlaste autorovi pluginu.

Normy

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

Automatická kontrola: pravidlo axe-core aria-prohibited-attr. dequeuniversity.com, github.com, www.w3.org

Podobné kontroly

Všechna pravidla, která kontrolujeme