Doporučený postup Priorita: Střední
Úrovně nadpisů přeskakují
Nadpisy na stránce přeskakují úrovně, například z <h2> rovnou na <h4>, takže osnova stránky má mezery. Jde o doporučený postup, nikoli o požadavek WCAG úrovně AA.
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 často procházejí stránku podle nadpisů jako podle obsahu. Vynechané úrovně působí, jako by některé sekce chyběly, a ztěžují pochopení, jak spolu souvisí popis produktu, recenze a informace o doručení.
Koho se to týká
- uživatelé čteček obrazovky
- lidé, kteří se pohybují po nadpisech
- lidé s kognitivním postižením
Jak to opravit
Používejte úrovně nadpisů pro strukturu, ne pro velikost písma: jeden <h1> pro hlavní téma, <h2> pro hlavní sekce, <h3> uvnitř nich a tak dále bez přeskakování. Pokud má nadpis vypadat menší nebo větší, změňte jeho styl v CSS, ne úroveň. Zkontrolujte opakující se bloky, jako jsou karty produktů, postranní panely a patička, které často mají pevnou úroveň.
V Shopify
Úrovně nadpisů bývají napevno v sekcích a snippetech šablony, například v kartách produktů nebo nadpisech patičky. Upravte značky v souborech Liquid; nastavení velikosti nadpisu v editoru šablony obvykle mění jen vzhled, ne úroveň.
V Shoptet (CZ)
Záleží hlavně na šabloně; úrovně ovládáte jen ve vlastním textovém obsahu. Používejte formáty nadpisů v editoru postupně a problémy šablony hlaste Shoptetu nebo partnerovi.
V PrestaShop
Úrovně jsou nastaveny v souborech .tpl motivu a v modulech, jako jsou výpisy produktů a bloky patičky. Přepište šablony ve svém motivu tak, aby úrovně šly po sobě.
V WooCommerce
Nastavte správnou úroveň v editoru bloků nebo v page builderu; většina widgetů nadpisů má volbu úrovně oddělenou od velikosti. Nadpisy widgetů šablony a názvy produktů ve výpisech mohou vyžadovat úpravu v podřízené šabloně (child theme).
Normy
Nejde o kritérium WCAG, ale o doporučený postup, který usnadní používání webu.
Automatická kontrola: pravidlo axe-core heading-order.
dequeuniversity.com, github.com, www.w3.org