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
| Norma | Bod |
|---|---|
| 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
Podobné kontroly
-
Některé prvky mají popisek pro Braillovo písmo, ale ne běžný název
WCAG 4.1.2 A
-
Stránka se sama obnovuje nebo přesměrovává
WCAG 2.2.1 A
-
Některé grafické prvky nemají textový popis
WCAG 1.1.1 A
-
Některá pole formulářů mají více popisků
WCAG 3.3.2 A