Doporučený postup Priorita: Drobné
Záhlaví webu je uvnitř jiné oblasti stránky
Oblast záhlaví (orientační oblast „banner“ s logem, vyhledáváním a košíkem) je vnořená do jiné oblasti, například do hlavního obsahu nebo navigace, místo aby stála samostatně nahoře na stránce. 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 knihy. Když je záhlaví schované v jiné oblasti, seznam kapitol se zamotá: zákazník, který skočí do záhlaví, aby se dostal k vyhledávání, účtu nebo košíku, může skončit jinde nebo záhlaví jako samostatnou kapitolu vůbec nenajde.
Koho se to týká
- uživatelé čteček obrazovky
- nevidomí zákazníci hledající vyhledávání, účet nebo košík
Jak to opravit
Umístěte <header> webu (nebo prvek s role="banner") přímo do struktury stránky, mimo <main>, <nav>, <aside> a jakýkoli prvek s rolí orientační oblasti. Obvykle za tím stojí obal stránky s role="main" nebo role="navigation" kolem záhlaví, nebo role="banner" přidaná prvku uvnitř jiné oblasti. <header> uvnitř <article> nebo <section> je v pořádku, protože se nepovažuje za záhlaví webu.
V Shopify
Obvykle to způsobuje layout/theme.liquid nebo vlastní obal kolem skupiny sekcí záhlaví, například div s rolí orientační oblasti na nesprávném místě. Přesuňte záhlaví z tohoto obalu nebo odstraňte nadbytečnou roli.
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, které vkládají záhlaví. Ověřte, že blok záhlaví neleží uvnitř prvku s role="main" nebo jinou rolí orientační oblasti.
V WooCommerce
Obvykle jde o header.php šablony nebo šablonu záhlaví v page builderu, která obaluje stránku prvkem s rolí orientační oblasti. Opravte to v header.php podřízené šablony nebo v šabloně záhlaví builderu.
Normy
Nejde o kritérium WCAG, ale o doporučený postup, který usnadní používání webu.
Automatická kontrola: pravidlo axe-core landmark-banner-is-top-level.
dequeuniversity.com, github.com, www.w3.org