Structure & headings
Heading Levels Skip a Step, like Jumping from h2 to h4
When heading levels skip, screen reader users may think they missed a section, and the page outline stops making sense.
heading-orderBest practiceBest practice — not a WCAG requirement, but it helps people all the same.
- Status
- ModerateModerate — An annoyance, with a workaround.CurrentScanners run this rule today.
- Owner
- DesignDevContentTest
- Audit
- Automated+ManualA scanner finds it; a person confirms the fix.
Why it matters
Many screen reader users move around a page by jumping from heading to heading. The level tells them how sections fit together, like an outline.
A skipped level suggests something is missing. People slow down, go back to look for it, or lose trust in the structure. This is a best practice, not a WCAG requirement, but it is cheap to get right.
Who it affects
| Who | What they experience | Impact |
|---|---|---|
| Screen reader users | They hear "heading level 4" after a level 2 and wonder if they missed a level 3 section. | Partial impact |
| Low-vision users (magnification) | Affected only if they use a screen reader or an outline tool. | Partial impact |
| Cognitive and neurodivergent users | Tools that show a page outline give a confusing, gappy structure. | Partial impact |
Business & product impact
| Area | Why | Impact |
|---|---|---|
| Legal | Not a WCAG failure on its own. But a messy heading structure often comes with real failures that are covered by Australia's Disability Discrimination Act. | Low impact |
| SEO | Search engines don't penalise skipped levels. Don't sell it as an SEO fix. | Low impact |
| Brand trust | A tidy outline shows care. Screen reader users notice sloppy structure. | Low impact |
| Cost to fix | Cheap to fix in templates. Style headings with classes so the level isn't chosen for its size. | Moderate impact |
Fixing it in code
A card heading picked for its size
Don't
<h2>Our services</h2>
<h4>Plumbing</h4>A screen reader says: “Our services, heading level 2 … Plumbing, heading level 4”
Do
<h2>Our services</h2>
<h3 class="card-title">Plumbing</h3>A screen reader says: “Our services, heading level 2 … Plumbing, heading level 3”
Pick the level for its place in the outline, and set the size with CSS.
Fixing it in design and content
Separate heading look from heading level
Don't
The design file labels a small card title as "H4" because it looks small.
Do
The design file names text styles by look, like "Title small", and notes the outline level separately.
Developers then choose levels by structure, not by size.
Designer's handoff note
Annotate each heading with its level, based on the outline, not its size.
Keep visual styles like "Title small" separate from levels h1 to h6.
Quick test
Tool
NVDA (opens in a new tab) (free on Windows)
Checklist
- Pass
- Each heading is at most one level deeper than the one before it.
- Fail
- A level is skipped, like a level 2 followed by a level 4.
Check these at the same time
- A heading has no text in it
empty-heading
What a green scan still misses
A scanner counts levels. It can't tell whether the headings describe their sections, or whether visual headings are marked up as headings at all.
Reference
- Rule ID
heading-order- Raised by
- axe-core: “Heading levels should only increase by one”
- WCAG
- Best practice — not a WCAG requirement
- Last reviewed
- 14 October 2026