Doporučený postup Priorita: Drobné
Dvě oblasti stránky znějí pro čtečku obrazovky stejně
Stránka má několik oblastí stejného typu, například dvě menu nebo dva postranní panely, bez popisku, který je rozliší. 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. Pokud v seznamu dvakrát zazní „navigace“, nevědí, které je hlavní menu obchodu a které menu účtu či patičky, takže otevřou špatné a vracejí se.
Koho se to týká
- nevidomí lidé používající čtečky obrazovky
- lidé s kognitivním postižením používající čtecí nástroje
- lidé používající rozšíření prohlížeče se seznamem oblastí stránky
Jak to opravit
Dejte každému opakovanému orientačnímu bodu jedinečný přístupný název pomocí aria-label nebo aria-labelledby, například <nav aria-label="Hlavní menu"> a <nav aria-label="Patička">. Totéž udělejte pro opakované <aside>, <section> nebo <form>, které fungují jako orientační body. Pokud prvek ve skutečnosti není samostatná oblast, raději mu roli orientačního bodu odeberte.
V Shopify
Obvykle jsou menu v záhlaví, mobilní vysouvací menu a menu v patičce všechno <nav> bez popisků. Přidejte aria-label ke každému <nav> v souborech sekcí záhlaví a patičky šablony.
V Shoptet (CZ)
Obvykle vychází z menu šablony. Nahlaste to Shoptetu nebo partnerovi; pokud je opakovaná oblast ve vlastním HTML, které jste přidali, popište ji tam sami.
V PrestaShop
Obvykle modul menu, bloky odkazů v patičce a odkazy účtu vypisují <nav> nebo <section> bez popisku. Přidejte aria-label v přepsáních šablon modulů v motivu.
V WooCommerce
Obvykle jde o menu šablony nebo oblasti widgetů (více postranních panelů, více navigačních menu). Přidejte aria-label v šablonách podřízené šablony (child theme), nebo v nastavení bloku navigace v blokovém editoru, pokud šablona používá bloky.
Normy
Nejde o kritérium WCAG, ale o doporučený postup, který usnadní používání webu.
Automatická kontrola: pravidlo axe-core landmark-unique.
dequeuniversity.com, github.com, www.w3.org