Overview

Headings are an important way to understand and navigate a page. In WebAIM Screen Reader User Survey #10, 71.6% of 1,539 respondents chose headings as the first way they would try to find information on a lengthy web page. That result describes this survey population and question; it is not a universal measure of all screen reader use. When heading levels are chosen for visual size, or visually prominent text is not marked up as a heading, users lose useful structure.

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:

• A single page-topic <h1> is a useful convention, but WCAG does not require exactly one <h1>
• Use heading levels to express a coherent hierarchy; avoid unnecessary downward skips such as <h2> to <h4>
• 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
• Moving from an <h3> subsection back to its next <h2> sibling is correct; the problem is choosing levels that do not represent the content hierarchy
• Missing or misleading headings make scanning and direct heading navigation less useful

Programmatic structure to verify:

Exact spoken output and navigation commands vary by screen reader, browser, settings, and language. Test the structure in the combinations your users rely on.

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