Skip to lesson content
WCAG 1.3.1 · Level AEasy5 min readStructure

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.

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.

WCAG Criterion:1.3.1
Conformance Level:Level A
Difficulty:Easy
Time to fix:~5 min
Category:Structure

The Problem

This pattern is inaccessible — avoid it.

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

The Fix

Use this accessible pattern instead.

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

Step-by-step

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

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

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

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

  5. Use 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.

Framework Notes

How to apply this fix in your stack.

[ REACT ]
// 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

Related lessons