Doporučený postup Priorita: Střední
Na stránce není označen hlavní obsah
Žádná část stránky není označena jako hlavní obsah, takže asistenční technologie nepoznají, kde začíná to podstatné. 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. Tady kapitola „hlavní obsah“ chybí, takže na každé stránce produktu nebo kategorie musí nejprve vyslechnout logo, menu a bannery, než se dostanou k produktům.
Koho se to týká
- nevidomí lidé používající čtečky obrazovky
- uživatelé klávesnice
- lidé s pohybovým postižením používající spínače
Jak to opravit
Obalte centrální obsah každé šablony stránky, tedy vše mezi záhlavím a patičkou, jedním prvkem <main> (nebo kontejnerem s role="main"). Záhlaví, navigaci ani patičku do něj nevkládejte. Zkontrolujte všechny typy šablon: úvodní stránka, kategorie, produkt, košík, pokladna, blog a statické stránky.
V Shopify
Většina současných šablon má <main> v layout/theme.liquid; starší nebo vlastní šablony mohou používat obyčejný <div>. Změňte tento obal kolem {{ content_for_layout }} na <main id="MainContent">.
V Shoptet (CZ)
Obvykle to určuje šablona, takže je těžké to změnit sami. Nahlaste to Shoptetu nebo partnerovi a požádejte o prvek <main> kolem obsahu stránky.
V PrestaShop
Obvykle je to nastaveno v souborech rozvržení motivu (.tpl), například v rozvržení, které používají všechny stránky. Změňte obal obsahu na <main> v každém souboru rozvržení nebo v podřízeném motivu.
V WooCommerce
Obvykle header.php/footer.php šablony otevírají a zavírají obal obsahu značkou <div>. V podřízené šabloně (child theme) ho změňte na <main>, nebo v page builderu nastavte značku kontejneru obsahu na main, pokud to umožňuje.
Normy
Nejde o kritérium WCAG, ale o doporučený postup, který usnadní používání webu.
Automatická kontrola: pravidlo axe-core landmark-one-main.
dequeuniversity.com, github.com, www.w3.org