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

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

Skryté prvky jsou stále dosažitelné klávesnicí

Některé části stránky jsou skryté před čtečkami obrazovky, ale klávesnicí se na ně stále dá přejít.

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é klávesnice se dostávají na neviditelné odkazy a uživatelé čteček obrazovky narážejí na tiché nebo nepojmenované prvky. U zavřených menu a vyskakovacích oken je pak orientace v obchodě matoucí.

Koho se to týká

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

Jak to opravit

Nevkládejte prvky, na které lze přejít klávesnicí, do aria-hidden="true". Když skrýváte menu nebo dialog, skryjte ho i pro fokus: použijte atribut hidden, display:none, inert nebo tabindex="-1" na jeho ovládacích prvcích.

V Shopify

Obvykle jde o vysouvací menu, panely, vyskakovací okna nebo karusely v šabloně či aplikacích. Opravte logiku skrývání v JavaScriptu nebo Liquid šablony; widgety aplikací nahlaste vývojáři.

V Shoptet (CZ)

Obvykle jde o menu, karusely nebo vyskakovací okna v šabloně. Nahlaste to podpoře Shoptet nebo partnerovi.

V PrestaShop

Obvykle jde o mobilní menu, karusely nebo modální moduly. Opravte to v šablonách a JavaScriptu motivu, nebo to nahlaste vývojáři modulu.

V WooCommerce

Obvykle jde o mobilní menu, slidery, vyskakovací okna nebo pluginy pro cookies. Opravte to v kódu podřízené šablony (child theme), 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-hidden-focus. dequeuniversity.com, github.com, www.w3.org

Podobné kontroly

Všechna pravidla, která kontrolujeme