heading-order · WCAG 1.3.1 Info and Relationships · Level AHow to fix the “heading-order” accessibility issue
The axe-core heading-order rule flags headings that jump levels — for example an <h2> followed directly by an <h4>. Screen-reader users navigate by heading level, so a broken outline breaks navigation. It relates to WCAG 2.2 1.3.1 (Level A).
What axe-core checks
axe-core reports when a heading level is more than one step below the previous heading (e.g. h2 → h4). Headings should descend one level at a time.
Which standard this maps to
| WCAG 2.2 | 1.3.1 Info and Relationships (Level A) |
| EN 301 549 | 9.1.3.1 |
| BFSG / EAA | BFSG § 12 via EN 301 549 · EAA Annex I |
| Category | Structure & Landmarks |
Why it matters
Heading level is the primary way screen-reader users skim a page. On a long product or category page, a scrambled outline means they cannot build a mental map of the content — a structural failure regulators and testers look for.
Common causes
- Choosing heading levels for visual size instead of structure
- A component dropping from
<h2>straight to<h4> - Multiple
<h1>elements - CMS widgets that emit fixed heading levels regardless of context
How to fix it
Use heading levels for structure, not styling. Descend one level at a time and style with CSS. There should be one <h1> per page.
<!-- Fails: skips h3 -->
<h2>Specs</h2>
<h4>Weight</h4>
<!-- Passes -->
<h2>Specs</h2>
<h3>Weight</h3>FAQ
Yes — after an h3 you may return to an h2 for the next section. The rule only flags skipping levels going deeper.
WCAG allows it, but a single h1 is the clearest and most widely recommended pattern.
Find every issue like this on your site
Run a free WCAG 2.2 AA scan — real axe-core engine, no signup. Or get a timestamped evidence report for €29.