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 it affects, and how much
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

Business & product impact, with how much each claim weighs
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”

<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.

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

Step 1: Turn NVDA on and open the page.
Step 2: Press Insert + F7 and choose Headings.
Step 3: Read the list and check how the levels nest.

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
Read more: Deque University: heading-order (opens in a new tab)
Last reviewed: 14 October 2026