Rule library Document semantics

Heading levels should only increase by one

heading-orderBest practice

Ensure the order of headings is semantically correct

Who this affects

Heading levels skip (h1 → h3 → h5). Screen reader users navigate by headings, and a broken outline makes the page hard to scan.

How to fix it

Use heading levels in sequence and style them with CSS rather than choosing a tag by its size.

Effort Low · ~30 min per template

Before and after

Fails

<h1>Kettles</h1>
<h4>Stainless steel</h4>

Passes

<h1>Kettles</h1>
<h2>Stainless steel</h2>

How to check it by hand

Use a heading-outline extension, or the screen reader's heading list. The outline should read like a table of contents. Levels that jump, or headings used for visual size, show up immediately here.

Automated testing settles roughly a third of the WCAG success criteria. This rule is one an automated tool detects reliably — but a clean automated result is not proof of conformance.

Reference

Deque's technical write-up for this rule: heading-order

See whether your site trips this rule

Paste a URL. We open it in a real browser, dismiss the cookie wall and run the full EN 301 549 rule set. No account, no card.

Run a free scan All rules