How to fix skipped heading levels

Change the tag, not the design: replace the skipped heading with the level that belongs in that position — an <h3> after an <h2>, never an <h4> — and reproduce the size you wanted with a CSS class. Headings must descend one level at a time, because the level sequence is the document outline that screen-reader users navigate by, and a jump implies a section that does not exist.

Last updated 2026-07-28

What does a "skipped heading level" mean?

It means a heading is more than one level below the heading that precedes it — an <h2> followed directly by an <h4>, with no <h3> in between. The jump asserts that the h4 sits inside a third-level section, and no third-level section exists.

Heading levels are not sizes; they are depth markers in a tree. H1 is the page, H2s are its main sections, H3s are subsections of the H2 above them, and so on. Read that way, a skip is a structural claim about the page that is simply untrue.

The cause is almost always visual. Someone needed a smaller heading, picked the tag that looked right, and shipped it — which is choosing the semantics to obtain a font size.

Why does heading order matter to real users?

Because headings are the primary navigation mechanism for screen-reader users on any page longer than a screen. Rather than listening to a page top to bottom, they pull up a list of headings and jump — and the level of each entry is what conveys how the page is organised.

In WebAIM's recurring screen reader user surveys, headings consistently rank as the most common way respondents say they find information on a long page, ahead of landmarks, links and in-page search. The outline is not a technicality; it is the table of contents.

When a level is skipped, the listener hears a fourth-level item announced under a second-level one and has to work out whether they missed something, whether content was hidden, or whether the page is simply built badly. On a page with a dozen skips, that guessing compounds until the outline stops being usable at all.

What does a correct outline look like?

Exactly one H1, then H2s for each main section, then H3s only underneath an H2 — each step down moving one level at a time. The visual sizes are then applied with CSS classes and are free to be anything you like, including an H3 that renders smaller than the body text.

<!-- Broken: H2 jumps to H4 -->
<h1>Website audits</h1>
  <h2>Performance</h2>
    <h4>Largest Contentful Paint</h4>

<!-- Correct: one level at a time, sized with CSS -->
<h1>Website audits</h1>
  <h2>Performance</h2>
    <h3 class="text-sm">Largest Contentful Paint</h3>
    <h3 class="text-sm">Cumulative Layout Shift</h3>
  <h2>Accessibility</h2>
    <h3 class="text-sm">Colour contrast</h3>

Can I go back up a level?

Yes, freely. Returning from an H3 to an H2 closes the subsection and starts a new main section, which is exactly what the outline is for. Only downward jumps of more than one level are a problem.

That asymmetry catches people out, so it is worth stating plainly: H2 → H3 → H3 → H2 → H3 is a perfectly correct sequence. H2 → H4 is not, regardless of what surrounds it.

How do I fix a skip without changing the design?

Swap the tag and move the styling into a class. An <h3 class="text-sm font-medium"> can render identically to whatever your <h4> looked like, because the browser default sizes are just defaults and every design system overrides them anyway.

Two other patterns come up repeatedly. Where a card component hard-codes its title as an <h4> and is dropped into different depths of page, make the level a prop so the parent decides — the component cannot know its own depth. And where a heading exists purely for assistive technology, such as a label for a navigation region, mark it up at the correct level and hide it visually with a screen-reader-only utility class rather than reaching for display: none, which removes it from the accessibility tree entirely.

Do not use ARIA to paper over the tag. aria-level works, but native heading elements are better supported and require no maintenance, so reserve role="heading" for cases where you genuinely cannot emit a real heading element.

How do I audit heading structure across a whole site?

Crawl the site and extract the ordered heading sequence per URL, then flag any page where the level increases by more than one. Doing this per template rather than per page is what makes it tractable — a skip in a shared component appears on every page that renders it, so a list of hundreds of failures usually collapses to two or three fixes.

Audra walks the heading sequence of each crawled page and reports the first skipped level it finds, alongside the H1 count check and the axe-core heading-order rule, which classifies this as a moderate best-practice violation. Seeing all three in one report gives you a page-by-page picture of document structure rather than three disconnected warnings.

It is worth pairing this with a look at whether the headings say anything. A page whose outline is technically perfect but reads "Overview / Details / More / Info" is failing readers in a different way, and often signals a page that is thin on substance underneath the structure.