Přejít na obsah
Pandus

Požadavek WCAG A/AA Priorita: Kritické

Celá stránka je skrytá před čtečkami obrazovky

Prvek <body> stránky má aria-hidden="true", což čtečkám obrazovky říká, aby celý její obsah ignorovaly.

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 nenajdou nic k přečtení: žádné menu, žádné produkty, žádné „Do košíku“ ani pokladnu. E-shop pro ně vypadá prázdný a odejdou.

Koho se to týká

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

Jak to opravit

Odstraňte aria-hidden z prvku <body>. Obvykle ho nastavuje skript vyskakovacího okna, postranního košíku, cookie lišty nebo mobilního menu, který stránku skryje, dokud je okno otevřené, a po zavření atribut neodstraní. Ke skrytí pozadí použijte atribut inert nebo nativní <dialog> na obsahu, ne na <body>, a dbejte, aby samotné okno nebylo ve skryté části.

V Shopify

Obvykle aplikace pro vyskakovací okna, newsletter, souhlas s cookies nebo postranní košík, případně skript postranních panelů šablony. Vypínejte aplikace jednu po druhé, abyste našli zdroj, pak opravte JavaScript šablony nebo to nahlaste vývojáři aplikace.

V Shoptet (CZ)

Obvykle skript vyskakovacího okna nebo doplňku, případně vlastní kód přidaný do šablony. Nahlaste to Shoptetu nebo partnerovi Shoptetu a odstraňte vlastní skripty, které nastavují aria-hidden na <body>.

V PrestaShop

Obvykle modul modálních oken, cookies nebo newsletteru, případně JavaScript šablony. Najděte skript, který nastavuje aria-hidden na <body>, a opravte ho nebo to nahlaste vývojáři modulu.

V WooCommerce

Obvykle plugin pro vyskakovací okna, souhlas s cookies, mini košík nebo mobilní menu, případně page builder. Na testovací kopii vypínejte pluginy jeden po druhém, abyste našli zdroj, a nahlaste to autorovi pluginu.

Normy

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

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

Všechna pravidla, která kontrolujeme