Požadavek WCAG A/AA Priorita: Závažné
Některé rozbalovací sekce nemají název
Klikací záhlaví rozbalovací sekce (prvek <summary>) nemá čitelný text, například akordeon s detaily produktu, skupina filtrů, otázka v FAQ nebo menu otevírané ikonou.
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 uslyší jen to, že jde něco rozbalit, ale ne co. Nemusí najít mobilní menu, filtry ani informace o dopravě a velikostech.
Koho se to týká
- nevidomí zákazníci
- uživatelé čteček obrazovky
- uživatelé hlasového ovládání
Jak to opravit
Dejte každému <summary> viditelný text, který sekci popisuje, například „Doprava a vrácení“ nebo „Menu“. Pokud summary obsahuje jen ikonu, přidejte mu aria-label nebo vizuálně skrytý text a samotnou ikonu označte jako dekorativní pomocí aria-hidden="true".
V Shopify
Časté: mnoho současných šablon používá <details> a <summary> pro mobilní menu, vyhledávání, filtry a akordeony produktu. Zkontrolujte soubory Liquid hlavičky a sekce produktu, zda neobsahují summary jen s ikonou, a ověřte, že každý blok akordeonu má vyplněný nadpis.
V Shoptet (CZ)
Může se objevit v šablonách nebo ve vlastním HTML s rozbalovacími sekcemi. Ověřte, zda to neopravuje novější verze šablony; jinak požádejte Shoptet nebo partnera Shoptetu o doplnění popisků.
V PrestaShop
Objevuje se, když šablona nebo moduly používají <details> pro menu, filtry či záložky produktu. Doplňte text nebo aria-label do <summary> v šablonách .tpl nebo v přepsaných šablonách modulů.
V WooCommerce
Méně časté; objevuje se v šablonách, blocích FAQ či akordeonů a widgetech page builderů, které používají <details>. Vyplňte název bloku nebo doplňte aria-label v šabloně podřízeného motivu; problémy pluginu nahlaste jeho autorovi.
Normy
| Norma | Bod |
|---|---|
| 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 summary-name.
dequeuniversity.com, github.com, www.w3.org
Podobné kontroly
-
Celá stránka je skrytá před čtečkami obrazovky
WCAG 1.3.1 A
-
Atributy přístupnosti jsou použity v nesprávné situaci
WCAG 4.1.2 A
-
Pole formuláře nemají popisek
WCAG 4.1.2 A
-
Některé ukazatele průběhu nemají název
WCAG 1.1.1 A