Broken Heading Structure

Overview

Headings (h1–h6) must form a logical, nested hierarchy. Skipping levels and using headings for visual styling breaks navigation for screen reader users.

The Problem

This pattern is inaccessible — avoid it.

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

The Fix

Use this accessible pattern instead.

<h1>Welcome</h1>
<h2>Our Services</h2>
<h3>Web Accessibility Scanning</h3>
<h2>Pricing</h2>

Step-by-step

1. 1

   Every page should have exactly one <h1> — the page's main topic.

2. 2

   Use <h2> for major sections, <h3> for sub-sections under h2, and so on.

3. 3

   Never skip levels (h1 → h3 is wrong; h1 → h2 → h3 is correct).

4. 4

   Don't choose heading levels for their visual size — use CSS to style them.

5. 5

   Use the Headings panel in browser accessibility tools to review the outline.

Framework Notes

How to apply this fix in your stack.

// Parameterize heading level to keep structure flexible
function Section({ level = 2, title, children }) {
  const Tag = `h${level}`;
  return <section><Tag>{title}</Tag>{children}</section>;
}

FAQ