Doporučený postup Priorita: Střední
Hlavní obsah je uvnitř jiné oblasti stránky
Prvek <main> nebo oblast s role="main", která označuje začátek vlastního obsahu stránky, je vnořená do jiné oblasti, například do záhlaví, navigace nebo postranního panelu. Jde o doporučený postup nad rámec úrovně WCAG 2.2 AA, o kterou se opírají zákony o přístupnosti.
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 přeskakují mezi oblastmi stránky (záhlaví, menu, hlavní obsah, patička) jako mezi kapitolami a kapitolu „hlavní obsah“ používají nejčastěji: vede rovnou na výpis produktů, popis produktu nebo objednávkový formulář. Když je vnořená do záhlaví nebo menu, struktura stránky je matoucí a zákazníci ztrácejí čas zjišťováním, kde vlastně začíná nakupování.
Koho se to týká
- uživatelé čteček obrazovky
- nevidomí a slabozrací zákazníci
- lidé, kteří se mezi oblastmi stránky pohybují pomocí nástrojů prohlížeče
Jak to opravit
Udělejte z <main> (nebo role="main") oblast nejvyšší úrovně stránky: ne uvnitř <header>, <nav>, <aside>, <footer> ani prvku s rolí orientační oblasti. Obvykle za tím stojí obal s role="banner" nebo role="navigation" kolem celé stránky, nebo nadbytečná role="main" uvnitř existující oblasti. Na stránce má být právě jedna hlavní oblast.
V Shopify
<main> je obvykle definován v layout/theme.liquid. Ověřte, že ho neobaluje obal záhlaví ani vložená aplikace a že sekce nepřidávají vlastní role="main".
V Shoptet (CZ)
Určuje to HTML struktura šablony. Zjistěte, zda to novější verze šablony opravuje; jinak to nahlaste Shoptetu nebo partnerovi.
V PrestaShop
Obvykle jde o .tpl soubory rozvržení šablony, kde se otevírá obal obsahu. Ověřte, že neleží uvnitř záhlaví, sloupce ani jiného prvku s rolí orientační oblasti.
V WooCommerce
Obvykle header.php šablony otevírá obal s rolí orientační oblasti, který pak obsahuje oblast obsahu, nebo page builder přidá role="main" vnitřnímu kontejneru. Opravte to v šablonách podřízené šablony nebo v nastavení rozvržení builderu.
Normy
Nejde o kritérium WCAG, ale o doporučený postup, který usnadní používání webu.
Automatická kontrola: pravidlo axe-core landmark-main-is-top-level.
dequeuniversity.com, github.com, www.w3.org