Level AAA

Where a page is organized into sections, 2.4.10 (Level AAA) requires each section to be marked with a real heading element so assistive technology can expose the document outline

2.4.10 Section Headings

In Plain Language

2.4.10 Section Headings (Level AAA) requires that where written content is organized into sections, each section is marked with a real heading element (<h2>, <h3>, and so on) in the correct nesting order[1]. The criterion does not demand headings on a single-topic page with no sections -- it applies wherever sections exist.

This is the quality-of-structure rule at AAA. 1.3.1 Info and Relationships (Level A) covers whether semantic markup is present at all[2]; 2.4.6 Headings and Labels (Level AA) covers whether the headings that exist describe their content[3]; 2.4.10 covers whether headings are used at the section level when the content has sections.

Why It Matters

  • Screen readers expose an outline built from h1-h6 elements. Users navigate it with a heading shortcut (H in NVDA and JAWS, the rotor in VoiceOver) to jump directly to a section instead of linearising the whole page.
  • Readers with cognitive and learning disabilities use headings as chunk boundaries -- a wall of text with no section markers forces them to hold the whole document in working memory to find a single answer.
  • Sighted keyboard users and low-vision users with screen magnifiers scan heading text to decide where to focus. Visual-only "headings" built from bold spans or larger font sizes look the part but are invisible to the accessibility tree, so none of that navigation works.
  • Skipped heading levels (<h2> directly to <h4>) break the outline: assistive technology reports a missing level, and the implied nesting no longer matches the visual structure.

Examples

Do: Mark each section with a real heading element

Return Policy

Eligibility

Items can be returned within 30 days of purchase.

Process

Start a return from your order history page.

Refunds

Refunds are issued to the original payment method.

✔ Each topic has its own heading -- users can scan or jump to the section they need

<h2>Return Policy</h2>

<h3>Eligibility</h3>
<p>Items can be returned within 30 days of purchase.</p>

<h3>Process</h3>
<p>Start a return from your order history page.</p>

<h3>Refunds</h3>
<p>Refunds are issued to the original payment method.</p>
Don't: Collapse distinct sections into one unbroken block

Items can be returned within 30 days of purchase. To start a return, go to your order history page and select the item. Refunds are issued to the original payment method within 5-10 business days.

✘ All content in one block -- no way to scan or jump to a specific topic

Do: Group related form fields with <fieldset> and <legend>
Shipping Address
Payment Method

✔ Fieldset legends act as section headings for form groups

<fieldset>
  <legend>Shipping Address</legend>
  <label>Street <input type="text"></label>
  <label>City <input type="text"></label>
</fieldset>

<fieldset>
  <legend>Payment Method</legend>
  <label>Card number <input type="text"></label>
</fieldset>
Don't: Fake headings with bold text and horizontal rules

Shipping Address

123 Main St, Springfield

Payment Method

Visa ending in 4242

✘ Bold text and lines look like headings but are not -- screen readers cannot navigate by them

How to Fix It

  1. Identify the section boundaries in the source content. Read the page as an outline: if the writer has more than one topic or more than one distinct subtopic, each one is a section 2.4.10 expects to see marked.
  2. Mark each section with a real heading element. Use <h2> for top-level page sections under the <h1>, <h3> for subsections inside an <h2>, and so on. Bold <p>, large <span>, and <div role="heading"> without an aria-level do not expose a heading to the accessibility tree.
  3. Nest levels in order -- do not skip. An <h2> is followed by <h3>, never directly by <h4>. Skipped levels break the outline assistive technology exposes and are what 1.3.1 is measuring on the same markup.
  4. Do not pick heading level by visual size. If a subsection needs smaller type, style it with CSS -- keep the level determined by its position in the outline. Using <h4> because "the designer wanted smaller text" is the most common mechanism behind broken outlines.
  5. Use <fieldset> and <legend> for form sections. A multi-section form (shipping vs. payment vs. review) is exactly the "content organized into sections" case 2.4.10 is describing[1]. Each fieldset's legend is announced as the group's label when any field inside it receives focus.
  6. Write headings that describe the section. 2.4.6 is the criterion that enforces this at AA[3] -- "Section 1" and "More Information" pass 2.4.10 but fail 2.4.6, so fix both in the same edit.

References

  1. [1] W3C (2023). Understanding Success Criterion 2.4.10: Section Headings. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/section-headings.html ↩ ↩
  2. [2] W3C (2023). Understanding Success Criterion 1.3.1: Info and Relationships. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html ↩
  3. [3] W3C (2023). Understanding Success Criterion 2.4.6: Headings and Labels. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html ↩ ↩