Doporučený postup Priorita: Drobné
Postranní panel je uvnitř jiné oblasti stránky
Prvek <aside> nebo doplňková oblast („complementary“), například panel filtrů, podobné produkty nebo propagační box, je vnořená do jiné oblasti, místo aby stála samostatně vedle hlavního obsahu. 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, postranní panel, patička) jako mezi kapitolami. Panel s filtry nebo podobnými produkty má být samostatnou kapitolou vedle hlavního obsahu. Když je zahrabaný v jiné oblasti, ozve se na nečekaném místě, snadno se omylem přeskočí a je těžké poznat, kde končí výpis produktů a začínají doplňky.
Koho se to týká
- uživatelé čteček obrazovky
- nevidomí a slabozrací zákazníci, kteří používají filtry
Jak to opravit
Přesuňte <aside> (nebo prvek s role="complementary") mimo <main>, <header>, <nav> či <footer>, aby ve struktuře stránky stál vedle nich. Pokud box skutečně patří k hlavnímu obsahu, například tip v popisu produktu, použijte místo <aside> nebo role="complementary" prvek <div> nebo <section> s nadpisem.
V Shopify
Šablony obvykle vykreslují všechny sekce uvnitř <main> v layout/theme.liquid, takže jednodušší bývá změnit tento <aside> v Liquid sekce (například panelu filtrů nebo propagačního bloku) na <div> nebo <section>.
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 levý nebo pravý sloupec v .tpl souborech rozvržení šablony. Ověřte, že sloupec neleží uvnitř <main> nebo prvku s role="main", případně změňte jeho tag na <div>.
V WooCommerce
Obvykle jde o sidebar.php šablony nebo oblast widgetů uvnitř obalu obsahu, případně widget page builderu, který vypisuje <aside>. Opravte strukturu v šablonách podřízené šablony nebo změňte HTML tag prvku v builderu, 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-complementary-is-top-level.
dequeuniversity.com, github.com, www.w3.org