Missing or Broken Heading Hierarchy

Your headings skip levels or are missing entirely. Screen readers use them like a table of contents — and yours is a mess.

What is this?

Think of headings like the table of contents in a book. You have the book title (H1), chapter titles (H2), section titles (H3), and so on. If a book jumped from Chapter 1 straight to a subsection 3.2 with no chapter 2 or 3, you would be confused. That is exactly what happens when your heading hierarchy is broken — except the people most affected are those using screen readers, who rely on headings to navigate your page.

Why it matters

For your visitors: Screen reader users often navigate by jumping between headings. If your headings skip from H1 to H4, or you use H3 before H2, the page structure makes no sense. It is like trying to use a table of contents where half the chapters are missing and the rest are in random order.
For your business: Search engines also use heading structure to understand your content. Broken hierarchy hurts SEO and makes your content harder to find. Visitors who cannot navigate your page efficiently will leave.
The standard: WCAG 1.3.1 (Info and Relationships) requires that the structure of content is programmatically determinable. Headings are the primary way to convey page structure.

Proper heading hierarchy

<h1>My SaaS Product</h1>
  <h2>Features</h2>
    <h3>Analytics Dashboard</h3>
    <h3>Team Management</h3>
  <h2>Pricing</h2>
    <h3>Free Plan</h3>
    <h3>Pro Plan</h3>

Broken heading levels

<h1>My SaaS Product</h1>
  <h4>Features</h4>  <!-- skipped h2 and h3! -->
  <h2>Analytics</h2>
  <h6>Pricing</h6>   <!-- why h6?! -->
  <h2>Free Plan</h2> <!-- same level as parent -->

How to fix it

React / Next.js

The rule is simple: never skip a level. H2 follows H1, H3 follows H2. You can go back up (H2 after H3), but never skip down.

// src/app/page.tsx
export default function HomePage() {
  return (
    <main id="main-content">
      {/* Only ONE h1 per page — it's your page title */}
      <h1 className="text-4xl font-bold">Welcome to CoolApp</h1>

      {/* Major sections get h2 */}
      <section>
        <h2 className="text-2xl font-semibold">Features</h2>

        {/* Subsections within Features get h3 */}
        <div>
          <h3 className="text-xl font-medium">Real-time Analytics</h3>
          <p>Track everything as it happens.</p>
        </div>

        <div>
          <h3 className="text-xl font-medium">Team Collaboration</h3>
          <p>Work together seamlessly.</p>
        </div>
      </section>

      <section>
        <h2 className="text-2xl font-semibold">Pricing</h2>
        <p>Simple, transparent pricing.</p>
      </section>
    </main>
  );
}

A common mistake: choosing heading levels based on how they look. Do not use H4 because you want smaller text — use the correct heading level and style it with CSS.

Plain HTML

<main>
  <!-- One h1 per page -->
  <h1>Your Page Title</h1>

  <section>
    <!-- h2 for major sections -->
    <h2>About Us</h2>
    <p>Some content here.</p>

    <!-- h3 for subsections within the h2 -->
    <h3>Our Mission</h3>
    <p>More content.</p>

    <h3>Our Team</h3>
    <p>Even more content.</p>
  </section>

  <!-- Back to h2 for the next major section -->
  <section>
    <h2>Contact</h2>
    <p>Get in touch.</p>
  </section>
</main>

<!-- If you want smaller text, use CSS, not a higher heading number -->
<style>
  h2 {
    font-size: 1.5rem;
  }
  h3 {
    font-size: 1.25rem;
  }
</style>

High impact — accessibility~2 paws

Heading hierarchy is the backbone of your page structure. Messing it up is like ripping out the table of contents from a 300-page book. The cat takes this one seriously.

How the cat scores this

The cat checks for several things: that there is exactly one H1 per page, that heading levels do not skip (no jumping from H1 to H3 without an H2), and that headings are used to structure content rather than just for visual styling. Pages with no headings at all get flagged too — the cat wants to see structure.