Skip to main content
Operable WCAG 2.4.10

2.4.10 Section Headings

Section headings are used to organize the content.

Level AAA Moderate WCAG 2.0 (new) WCAG 2.1 WCAG 2.2

What this rule means

WCAG 2.4.10 requires that content is organized using section headings. When web content is divided into sections, each section should begin with an appropriate heading element (h1-h6) that describes the content of that section. This builds on 2.4.6 (Headings and Labels) which requires headings to be descriptive — this criterion requires headings to be present for all sections.

This is a Level AAA criterion that pushes for comprehensive heading structure throughout all content. The intent is to ensure that every distinct section of content is introduced by a heading, making the page fully navigable by heading for assistive technology users.

Why it matters

Screen reader users navigate primarily by heading. The heading structure serves as a table of contents for the page — users can jump from heading to heading to quickly scan the page and find relevant sections. Without comprehensive headings, users must read content linearly to understand the page structure, which is extremely slow and fatiguing.

Headings also benefit users with cognitive disabilities by breaking content into manageable chunks, users with low vision who use screen magnifiers by providing orientation points, and all users who scan pages visually.

Related axe-core rules

There are no specific automated axe-core rules that enforce section headings on all sections. This criterion requires manual content review.

How to test

  1. Use a browser extension to generate a heading outline of the page (e.g., HeadingsMap, WAVE).
  2. Verify that every distinct content section is preceded by a heading element.
  3. Check that the heading hierarchy is logical and does not skip levels (h1 > h2 > h3).
  4. Navigate with a screen reader using heading navigation (H key) and confirm the page structure is clear.
  • Ensure headings are not used on elements that are not actually section headings (e.g., using h3 for visual styling).
  • Check that there is exactly one h1 per page, serving as the main page title.

How to fix

Add heading elements at the beginning of each content section, maintaining a logical hierarchy.

Proper heading structure

<main>
  <h1>Accessibility Knowledge Base</h1>

  <section>
    <h2>Perceivable</h2>
    <p>Content must be presentable to users in ways they can perceive...</p>

    <section>
      <h3>Text Alternatives</h3>
      <p>Provide text alternatives for non-text content...</p>
    </section>

    <section>
      <h3>Adaptable</h3>
      <p>Create content that can be presented in different ways...</p>
    </section>
  </section>

  <section>
    <h2>Operable</h2>
    <p>User interface components must be operable...</p>
  </section>
</main>

Using ARIA for implicit sections

<!-- When section headings are visually hidden but needed for AT -->
<section aria-labelledby="sidebar-heading">
  <h2 id="sidebar-heading" class="sr-only">Related Articles</h2>
  <ul>
    <li><a href="/kb/2-4-7">Focus Visible</a></li>
    <li><a href="/kb/2-4-11">Focus Not Obscured</a></li>
  </ul>
</section>

<style>
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
</style>

Common mistakes

  • Content sections without any heading — users cannot navigate to or identify these sections.
  • Skipping heading levels (e.g., h1 directly to h3) which breaks the logical document outline.
  • Using heading elements for visual styling rather than structural organization.
  • Multiple h1 elements on a single page, making the primary topic unclear.
  • Using bold or large text instead of heading elements — visually similar but invisible to assistive technology.
  • Leaving the heading structure inconsistent across pages, confusing returning users.

Resources