Recommended practice Priority: Moderate
Heading levels skip a step
The headings on the page jump levels, for example from an <h2> straight to an <h4>, so the outline of the page has gaps. This is a recommended practice, not a WCAG AA requirement.
This text was translated automatically and has not been reviewed by a native speaker yet.
Why it matters to your customers
Screen reader users often explore a page through its headings, like a table of contents. Skipped levels make it look as if sections are missing and make it harder to understand how product details, reviews and delivery information relate to each other.
Who is affected
- screen reader users
- people who navigate by headings
- people with cognitive disabilities
How to fix it
Use heading levels to show structure, not to set text size: one <h1> for the main topic, <h2> for main sections, <h3> inside those, and so on without skipping. If a heading should look smaller or bigger, change its style with CSS instead of choosing another level. Check repeated blocks such as product cards, sidebars and footers, which often use a fixed level.
On Shopify
Heading levels are usually hard-coded in the theme's sections and snippets, for example product cards or footer titles. Adjust the tags in the Liquid files; a heading size setting in the theme editor usually changes only the look, not the level.
On Shoptet (CZ)
Mostly decided by the template; you control levels only in your own text content. Use the editor's heading formats in order, and report template issues to Shoptet or a partner.
On PrestaShop
Levels are set in the theme's .tpl files and in modules such as product lists and footer blocks. Override the templates in your theme so the levels follow each other in order.
On WooCommerce
Set the right level in the block editor or page builder; most heading widgets have a level option that is separate from the size. Theme widget titles and product loop titles may need a change in a child theme.
Standards
Not a WCAG success criterion: a recommended practice that makes the site easier to use.
Automated check: axe-core rule heading-order.
dequeuniversity.com, github.com, www.w3.org