Doporučený postup Priorita: Střední
Stránka má více než jedno záhlaví webu
Stránka obsahuje dvě nebo více oblastí záhlaví („banner“), například běžné záhlaví a k tomu samostatnou plovoucí nebo mobilní kopii, případně akční proužek označený jako banner. 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 a očekávají právě jednu kapitolu záhlaví s logem, vyhledáváním, účtem a košíkem. Když je záhlaví víc, slyší ho v seznamu opakovaně, nevědí, které je to pravé, a mohou dvakrát procházet stejné odkazy i tlačítko košíku.
Koho se to týká
- uživatelé čteček obrazovky
- nevidomí zákazníci
- lidé používající čtečku obrazovky na telefonu
Jak to opravit
Ponechte na stránce jen jeden <header> nejvyšší úrovně nebo role="banner". Pokud šablona vykresluje oddělená záhlaví pro počítač a mobil nebo kopíruje záhlaví do plovoucí lišty, udělejte z kopie obyčejný <div>, nebo neaktivní verzi skryjte pro všechny pomocí display:none či atributu hidden. Odstraňte role="banner" z úvodních obrázků a oznamovacích lišt: marketingový banner není orientační oblast banner.
V Shopify
Obvykle to způsobuje oznamovací lišta, kopie plovoucího záhlaví nebo aplikace, která přidává vlastní <header> či role="banner". Zkontrolujte skupinu sekcí záhlaví a layout/theme.liquid a nadbytečný prvek změňte na <div>; u kódu aplikace se obraťte na jejího vývojáře.
V Shoptet (CZ)
Určuje to šablona, která může vykreslovat oddělená záhlaví pro počítač a mobil. Zjistěte, zda to novější verze šablony opravuje; jinak to nahlaste Shoptetu nebo partnerovi.
V PrestaShop
Obvykle modul (mega menu, slider bannerů nebo plovoucí záhlaví) přidává druhý <header> nebo role="banner". Přepište šablonu modulu ve své šabloně a nahraďte ho prvkem <div>.
V WooCommerce
Page buildery často vypisují oddělená záhlaví pro počítač, mobil a plovoucí lištu a všechna jsou prvky <header>. Změňte HTML tag nadbytečných záhlaví na <div>, pokud to builder umožňuje, nebo upravte header.php podřízené šablony.
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-banner.
dequeuniversity.com, github.com, www.w3.org