axe-core rule: heading-order

Heading levels skip around

Fix reference | BarrierScan

What it is

Heading levels jump (for example h2 straight to h4), breaking the document outline that assistive technology builds from headings.

Who it blocks

Screen reader users navigate by heading level to skim a page the way sighted users visually scan it. Skipped levels make sections appear missing or misplaced.

How to fix it

Use heading levels to reflect structure, not font size: h1 for the page title, h2 for major sections, h3 for subsections, without skipping levels. Style headings with CSS instead of choosing a tag for its size.

Example fix

<!-- Before -->
<h1>Office Chairs</h1>
<h4>Ergonomic models</h4>

<!-- After -->
<h1>Office Chairs</h1>
<h2 class="subheading-style">Ergonomic models</h2>

This is one of the barrier types BarrierScan checks for on every scan. Request a free accessibility scan to see whether it appears on your site, alongside the rest of the automated findings.