Heading levels are skipped

What’s wrong

The page skips one or more heading levels — for example jumping from <h1> to <h3> with no <h2> in between.

Why it matters

Screen reader users navigate pages by jumping between headings using keyboard shortcuts. The heading hierarchy is their table of contents. When levels are skipped, the structure is broken and users lose their sense of where they are in the page. It also confuses assistive technology about how sections relate to each other.

How to fix it

Use headings in order without skipping levels. You can style them however you like — the visual size doesn’t need to match the heading level.

<h1>Our Services</h1>
  <h3>Web Design</h3>  <!-- skipped h2 -->
    <h5>Pricing</h5>   <!-- skipped h4 -->

<h1>Our Services</h1>
  <h2>Web Design</h2>
    <h3>Pricing</h3>

If you need a heading to look smaller or larger than its level implies, use CSS rather than choosing a different heading tag. <h2 class="text-sm"> is fine. <h4> when you mean <h2> is not.

Learn more

• WCAG Understanding 1.3.1
• MDN: Heading elements