Headings skip a level

Why it matters

Headings are how a screen-reader user skims: one key jumps from heading to heading, and the level says how the page is put together, as a table of contents does. An <h2> followed by an <h4> sounds like a section has gone missing, and a page with no <h1> whose first heading is an <h3> sounds like it starts in the middle.

It nearly always happens because a heading was chosen for its size. The level is for the structure; the size is for CSS.

This is a notice because the guidelines ask that headings describe and reflect the structure, not that the numbers never skip: a skipped level is a sign the outline wasn't thought about, not a failure in itself. Going back up any number of levels (an <h4> then an <h2>) is fine: that is a new section starting.

Sources: WCAG 2.2, 1.3.1 Info and Relationships and 2.4.6 Headings and Labels; W3C: headings.

How to fix it

Start at <h1> and go down one level at a time, then style them however the design wants:

<h1>Wedding cakes</h1>
<h2>Flavours</h2>
<h3>Lemon and elderflower</h3>
<h2>Prices</h2>

Examples

These are the rule's own test pages, and what it says about each. They are run on every change to the rule book.

<h1>Wedding cakes</h1>
<h2>Flavours</h2>
<h4>Lemon and elderflower</h4>

NoticeThe headings skip a level in 1 place: an <h2> is followed by an <h4> ("Lemon and elderflower"). Read as an outline, a section seems to be missing.

fail-skips

<h3>Wedding cakes</h3>
<h4>Flavours</h4>

NoticeThe headings skip a level in 1 place: there is no <h1>, and the first heading is an <h3> ("Wedding cakes"). Read as an outline, a section seems to be missing.

fail-starts-at-h3

<h1>Wedding cakes</h1>
<h2>Flavours</h2>
<h3>Lemon and elderflower</h3>
<h2>Prices</h2>

PassedThe headings go down one level at a time (4 headings).

pass-in-order