Broken heading structure.

The problem

Screen reader users navigate by headings the way sighted users skim with their eyes—pressing a single key to jump between them. WebAIM’s survey found headings are the number-one way screen reader users locate information on a page. When levels are skipped or headings are chosen for their visual size, that mental outline collapses and the page becomes far harder to use. Clean headings also help SEO, since search engines rely on them to understand your content.

The fix

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

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

Step by step

1. 1Every page should have exactly one <h1> — the page's main topic.
2. 2Use <h2> for major sections, <h3> for sub-sections under h2, and so on.
3. 3Never skip levels (h1 → h3 is wrong; h1 → h2 → h3 is correct).
4. 4Don't choose heading levels for their visual size — use CSS to style them.
5. 5Use the Headings panel in browser accessibility tools to review the outline.

Common mistakes

• ×Choosing a heading level for its font size instead of its place in the outline.
• ×Skipping levels (h1 → h3) to get a smaller heading.
• ×Using multiple h1s, or no h1 at all.
• ×Marking up bold paragraph text as a heading, or a real heading as plain bold text.

How to test for it

• Use the HeadingsMap extension or the accessibility tree to view the outline.
• Navigate by heading in a screen reader (the H key in NVDA/VoiceOver) and check the order.
• Run an automated scan for skipped levels and a missing h1.

In your framework

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

Questions