Doporučený postup Priorita: Střední
Stránka má více než jednu oblast hlavního obsahu
Dvě nebo více částí stránky jsou označeny jako hlavní obsah. Taková oblast má být jen jedna. Jde o doporučenou praxi nad rámec úrovně WCAG 2.2 AA, o kterou se opírá zákon.
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. Když přeskočí na „hlavní obsah“, mohou skončit na banneru nebo widgetu místo na stránce produktu či v košíku a musí hledat znovu.
Koho se to týká
- nevidomí lidé používající čtečky obrazovky
- uživatelé klávesnice, kteří spoléhají na odkaz „Přejít na obsah“
- slabozrací lidé používající lupu obrazovky s hlasovým výstupem
Jak to opravit
Ponechte jediný prvek <main> (nebo role="main"), který obaluje skutečný obsah stránky. Nadbytečné <main> nebo role="main" ve vnořených šablonách, sekcích a vložených widgetech nahraďte prvkem <div> nebo <section>. Zkontrolujte také vyskakovací okna, rychlý náhled produktu a velká menu, protože často vznikají z kopie šablony stránky.
V Shopify
Obvykle layout/theme.liquid šablony už obsahuje <main> a sekce nebo blok aplikace přidává další. Změňte nadbytečný <main> v souboru sekce nebo požádejte vývojáře aplikace o jeho odstranění.
V Shoptet (CZ)
Obvykle vychází z vlastního HTML přidaného na stránku nebo ze šablony. Nejprve zkontrolujte kód, který jste přidali sami; pokud je problém v šabloně, nahlaste ho Shoptetu nebo partnerovi.
V PrestaShop
Obvykle <main> vypisuje jak šablona rozvržení motivu (.tpl), tak šablona modulu. Upravte přepsání šablony modulu v motivu tak, aby <main> byl jen v rozvržení.
V WooCommerce
Obvykle šablona obaluje obsah do <main> a page builder nebo přepsaná šablona WooCommerce přidává druhý. Opravte to v šabloně podřízené šablony (child theme) nebo v builderu přepněte značku kontejneru na div.
Normy
Nejde o kritérium WCAG, ale o doporučený postup, který usnadní používání webu.
Automatická kontrola: pravidlo axe-core landmark-no-duplicate-main.
dequeuniversity.com, github.com, www.w3.org