2.4.10 Section Headings

Level: AAA | Principle: Operable | Since: WCAG 2.0 | Automation: Manual

What This Means

Content must be organized with section headings. When content can logically be divided into sections, headings must be used to label each section. This helps users understand the structure of the page and navigate to the section they need.

Headings act as signposts. Sighted users scan headings to find what they are looking for. Screen reader users navigate by headings using shortcuts (like the H key in NVDA or VoiceOver). Without headings, a screen reader user must listen to the entire page sequentially to find a specific section.

This criterion applies to all content that can be organized into sections — articles, forms, settings pages, documentation, and any page with multiple topics or groups of related content.

Who This Affects

Screen reader users — headings are the primary navigation mechanism within a page
Users with cognitive disabilities — headings break content into manageable chunks
Users with low vision — headings provide visual structure when magnified
All users — headings improve scannability and comprehension for everyone

Common Pitfalls

1. Long content with no headings

<!-- Bad: wall of text with no structure -->
<div class="article">
  <p>Our return policy allows returns within 30 days...</p>
  <p>For international orders, shipping takes 7-14 days...</p>
  <p>Payment methods include credit card, PayPal...</p>
</div>

<!-- Good: content organized with headings -->
<article>
  <h1>Store Policies</h1>
  <h2>Return Policy</h2>
  <p>Our return policy allows returns within 30 days...</p>
  <h2>International Shipping</h2>
  <p>For international orders, shipping takes 7-14 days...</p>
  <h2>Payment Methods</h2>
  <p>Payment methods include credit card, PayPal...</p>
</article>

2. Styled text used instead of heading elements

<!-- Bad: visually looks like a heading but is not one -->
<p class="text-2xl font-bold">Account Settings</p>
<p>Manage your profile, security, and preferences.</p>

<!-- Good: actual heading element -->
<h2>Account Settings</h2>
<p>Manage your profile, security, and preferences.</p>

3. Skipping heading levels

<!-- Bad: jumps from h1 to h4 -->
<h1>Documentation</h1>
<h4>Getting Started</h4>
<p>Install the package...</p>

<!-- Good: proper heading hierarchy -->
<h1>Documentation</h1>
<h2>Getting Started</h2>
<p>Install the package...</p>

How to Test

Open a screen reader and navigate by headings (NVDA: H key; VoiceOver: VO+Cmd+H) to get an outline of the page structure.
Verify every distinct section of content has a heading element (<h1>-<h6>).
Check that heading levels follow a proper hierarchy (h1 for the page title, h2 for major sections, h3 for subsections) with no skipped levels.
Inspect the DOM for any bold/large styled text that acts as a visual section label but is not a heading element.
Pass: Every content section has a proper heading element, heading levels are sequential, and no styled text is used in place of headings.
Fail: Any content section lacks a heading, heading levels are skipped, or bold-styled <div>/<p> elements are used instead of heading elements.

How to Fix

Identify logical sections within each page and add appropriate heading elements
Use a single h1 for the page title, h2 for major sections, h3 for subsections, and so on
Replace any bold/large styled text that acts as a section label with proper heading elements
Maintain a consistent heading hierarchy — do not skip levels
For form sections, use h2 or h3 headings, or use <fieldset> with <legend> for form groups