Overview

Screen reader users rely on headings more than any other navigation mechanism. According to the WebAIM screen reader user survey, 67.5% of respondents navigate by headings as their primary strategy for finding information. When heading levels are skipped, chosen for visual size rather than hierarchy, or when visually prominent text is not marked up as a heading at all, screen reader users lose their navigable document outline.

WCAG Criteria:

• 1.3.1 Info and Relationships  — information and relationships conveyed through presentation must be programmatically determinable
• 2.4.6 Headings and Labels  — headings and labels must describe topic or purpose

Key requirements:

• Use one <h1> per page to identify the primary topic
• Never skip heading levels — go from <h1> to <h2> to <h3>, not <h1> to <h3>
• Choose heading levels by document hierarchy, not visual size
• Text that acts as a section heading must use a heading element, not a styled <p> or <div>
• Headings create a navigable outline — screen reader users can list and jump between them

Heading Hierarchy

<!-- Heading levels chosen by visual size, not hierarchy -->
<h1>Blog</h1>
<h3>Latest Posts</h3>  <!-- skipped h2! -->
<p style="font-size:18px; font-weight:bold">Featured</p>  <!-- looks like a heading but isn't -->
<h2>About</h2>  <!-- inconsistent level after h3 -->

<!-- Clean hierarchy: h1 → h2 → h3 → h2 -->
<h1>Blog</h1>
<h2>Latest Posts</h2>
<h3>Featured</h3>
<h2>About</h2>

What’s wrong with skipped and faked headings?

• Jumping from <h1> to <h3> makes screen reader users wonder if they missed an <h2> section
• A bold <p> styled to look like a heading never appears in the heading list — screen reader users cannot navigate to it
• Using <h2> after <h3> at the same nesting level creates a confusing, inconsistent outline
• 67.5% of screen reader users navigate by heading — a broken outline means they cannot efficiently find content

What the screen reader announces:

Resources

• WebAIM Screen Reader User Survey — Navigating Content 
• WAI Tutorial — Headings 
• MDN — <h1> to <h6> elements
• WCAG 1.3.1 — Info and Relationships 
• WCAG 2.4.6 — Headings and Labels