The 2025 TestParty Guide to WCAG 2.4.10 – Section Headings (Level AAA)

Why did the web developer break up with their content? Because it had no structure and they couldn't see where one section ended and another began!

WCAG 2.4.10 requires that section headings be used to organize content, making it easier for all users—especially those using assistive technologies—to understand structure and navigate efficiently. While this is a Level AAA criterion (the highest conformance level), implementing it creates a better experience for everyone and demonstrates a commitment to accessibility excellence.

Table of Contents

• What WCAG 2.4.10 Requires
• Why This Matters
• Quick Implementation Guide
• Common Mistakes to Avoid
• How to Test for WCAG 2.4.10
• How TestParty Helps
• FAQs

What WCAG 2.4.10 Requires

WCAG 2.4.10 Section Headings is straightforward: whenever your content is organized into sections, use headings to mark those sections clearly.

Key points about this requirement:

• Applies to content sections, not UI components: This criterion focuses on the main content of your page—articles, documentation, long-form text—not navigation menus, buttons, or form controls (those fall under 4.1.2 Name, Role, Value).
• "Heading" means any title or label: This includes traditional <h1>-<h6> elements, but also titles in different contexts like document sections, chapters, or content blocks.
• It's about organization, not just presence: The headings should actually reflect the structure of your content and help users understand how information is grouped.
• Not mandatory for all content: If your content doesn't have distinct sections, you don't need to artificially create headings. This applies when sections naturally exist.

The criterion recognizes that well-organized content with clear section markers benefits comprehension and navigation for everyone, particularly screen reader users who can jump between headings and users with cognitive disabilities who benefit from clear structure.

Why This Matters

Screen reader users rely heavily on heading navigation to understand page structure and jump to relevant sections. When headings clearly mark content sections, a user can press a single key to skip through major topics instead of listening to every word.

Legal and compliance context:

While Level AAA criteria like 2.4.10 are not typically required for ADA Title II or Title III compliance (which generally reference Level AA), they are increasingly expected in government contracts, higher education, and organizations pursuing accessibility excellence. Section 508 refresh standards align with WCAG 2.0 Level AA, and EN 301 549 similarly references Level AA as the baseline. However, the European Accessibility Act and some national implementations encourage exceeding minimum standards, and demonstrating AAA conformance on organizational content can strengthen your legal position and user experience.

Business benefits:

Clear section headings improve SEO—search engines use heading structure to understand content hierarchy. They also reduce support costs by making self-service content easier to navigate, and they improve content usability for mobile users scanning on small screens.

Quick Implementation Guide

Implementing section headings is primarily about thoughtful content structure and proper HTML semantics.

Best practices:

• Use semantic HTML heading elements (<h1> through <h6>) to mark content sections rather than styling regular text to look like headings.
• Create a logical hierarchy that reflects your content's structure—don't skip levels (e.g., don't jump from <h2> to <h5>).
• Make headings descriptive: Each heading should clearly indicate what the following section contains.
• Place headings at the beginning of sections: Users should encounter the heading before the content it describes.
• Don't use headings purely for visual effect: If text looks like a heading but doesn't mark a content section, use CSS styling on a <p> or <span> instead.

Good implementation example:

<article>
  <h1>Annual Accessibility Report 2025</h1>
  
  <section>
    <h2>Executive Summary</h2>
    <p>This year we achieved significant progress...</p>
  </section>
  
  <section>
    <h2>Testing Methodology</h2>
    <p>We conducted comprehensive audits using...</p>
    
    <h3>Automated Testing</h3>
    <p>Our automated scans covered...</p>
    
    <h3>Manual Testing</h3>
    <p>Expert testers evaluated...</p>
  </section>
  
  <section>
    <h2>Key Findings</h2>
    <p>The audit revealed...</p>
  </section>
</article>

This structure uses headings to clearly delineate major sections (Executive Summary, Testing Methodology, Key Findings) and subsections (Automated Testing, Manual Testing), making the document easy to navigate and understand.

Key WCAG techniques:

• G141: Organizing a page using headings – The fundamental technique of using headings to create clear content structure
• H69: Providing heading elements at the beginning of each section of content – Ensures headings appear before the content they describe

Common Mistakes to Avoid

Even experienced developers make these section heading errors:

• Using `<div>` or `<span>` with heading classes instead of semantic heading elements: Visual styling alone doesn't provide the programmatic structure assistive technologies need. Always use actual <h1>-<h6> elements.

• Skipping heading levels for visual effect: Jumping from <h2> to <h5> because you want smaller text breaks the logical hierarchy. Use CSS to adjust visual size while maintaining proper heading levels.

• Creating headings that don't actually mark sections: Adding an <h3> just to make text bold and large when it doesn't introduce a new content section confuses structure. Use CSS styling on regular text instead.

• Inconsistent heading use within similar content: If you use headings to organize one long article, use them consistently in other similar articles. Inconsistency makes your site harder to learn and navigate.

How to Test for WCAG 2.4.10

Testing section headings requires both automated analysis and human judgment about content organization.

Automated testing can identify:

• Whether heading elements exist on pages with substantial content
• If heading hierarchy is logical (no skipped levels)
• Whether elements styled to look like headings use proper semantic markup
• Basic structural patterns that suggest missing section markers

Manual review is essential for:

• Evaluating whether sections are appropriately marked: Does the content naturally divide into sections, and are those sections marked with headings?
• Assessing heading descriptiveness: Do the headings clearly describe what follows?
• Checking heading placement: Are headings positioned at the beginning of the sections they describe?
• Verifying content organization makes sense: Does the heading structure help users understand and navigate the content?

Quick test checklist:

• Open your page and identify distinct content sections visually
• Use a screen reader or browser extension to view the heading outline
• Verify each major section has a heading at its start
• Confirm headings accurately describe their sections
• Check that heading levels create a logical hierarchy

How TestParty Helps

TestParty's AI-powered accessibility platform helps organizations implement and maintain proper section heading structure at scale, catching issues before they reach production.

What TestParty detects:

TestParty's DOM and source code analysis identifies heading structure issues across your entire site:

• Pages with long-form content that lack heading structure entirely
• Skipped heading levels that break logical hierarchy (e.g., <h2> followed by <h5>)
• Elements styled to look like headings (via CSS classes like .heading, .title, .section-header) that don't use semantic heading elements
• Inconsistent heading patterns across similar content types (e.g., blog posts that vary in structure)
• Heading elements used purely for styling rather than marking actual content sections
• Missing headings at the beginning of clearly delineated content sections

TestParty analyzes both the technical heading structure and the content context to flag potential section heading violations that require human review.

How TestParty suggests fixes:

For many section heading issues, TestParty generates specific remediation guidance:

• Semantic markup corrections: When styled text should be a heading, TestParty suggests converting <div class="heading"> to proper <h2> elements with appropriate CSS classes preserved
• Hierarchy fixes: For skipped levels, TestParty recommends the correct heading level based on document structure
• Structure suggestions: When analyzing long-form content without headings, TestParty's AI identifies logical section breaks and suggests where headings would improve organization
• Template-level improvements: For CMS and ecommerce platforms, TestParty works at the theme/template level so heading structure fixes cascade across thousands of pages automatically

All AI-generated suggestions are reviewed by developers or TestParty accessibility specialists before implementation, ensuring fixes align with content intent and editorial standards.

Developer workflow integration:

TestParty catches section heading issues during development, not after launch:

• CI/CD pipeline integration: Automated checks flag heading structure problems in pull requests, with line-level annotations showing exactly where issues occur
• Pre-merge gates: Teams can configure TestParty to block merges when critical heading hierarchy violations are introduced
• IDE integration: Real-time feedback as developers write markup, suggesting proper heading elements when content structure indicates sections
• Component library validation: TestParty scans design system components to ensure heading patterns are accessible by default

This shift-left approach prevents section heading regressions and builds accessibility into your development process.

Ongoing monitoring:

TestParty continuously monitors heading structure across your site:

• Regression detection: Alerts when template changes or content updates break previously correct heading hierarchies
• Content audits: Regular scans of new blog posts, documentation, and long-form content to ensure consistent heading use
• Compliance dashboards: Track section heading conformance across your site, with drill-down views by content type or template
• Audit-ready reports: Documentation of heading structure implementation for legal reviews, procurement requirements, or accessibility statements

For organizations managing thousands of content pages, TestParty's automated monitoring ensures section headings remain consistent and compliant as content evolves.

TestParty has performed tens of thousands of accessibility audits for sites responsible for billions in ecommerce revenue, with deep expertise in heading structure patterns across Shopify, WordPress, and headless CMS implementations. By combining automated detection with human oversight, TestParty helps teams implement WCAG 2.4.10 Section Headings efficiently while maintaining editorial quality.

FAQs About WCAG 2.4.10

What is WCAG 2.4.10 Section Headings in plain language?

WCAG 2.4.10 requires that when your content is organized into sections, you use headings to mark those sections clearly. This helps all users—especially those using screen readers—understand how your content is structured and navigate to the parts they need. Think of it like chapter titles in a book: they help readers know what's coming and find specific topics quickly.

Is WCAG 2.4.10 required for ADA compliance?

No, WCAG 2.4.10 is a Level AAA criterion, and ADA compliance typically requires only Level AA conformance. However, implementing section headings is a best practice that improves usability for everyone and demonstrates commitment to accessibility excellence. Some government contracts, higher education institutions, and organizations pursuing comprehensive accessibility may require or strongly encourage Level AAA conformance where feasible.

What's the difference between WCAG 2.4.10 and 2.4.6 (Headings and Labels)?

WCAG 2.4.6 (Level AA) requires that headings and labels be descriptive—it focuses on the quality of the text. WCAG 2.4.10 (Level AAA) requires that headings be used to organize content—it focuses on whether you're using headings at all when content has sections. Both work together: 2.4.10 says "use headings to mark sections," and 2.4.6 says "make those headings descriptive."

Do I need headings on every page?

No. WCAG 2.4.10 only requires headings when your content is organized into sections. A simple contact form or a landing page with minimal content might not need section headings. However, any page with substantial content—articles, documentation, long descriptions—should use headings to organize that content into logical sections.

Can I use ARIA to create headings instead of HTML heading elements?

While ARIA can provide heading semantics (using role="heading" and aria-level), it's better to use native HTML heading elements (<h1>-<h6>) whenever possible. Native elements have better browser and assistive technology support, require less code, and are less prone to implementation errors. Reserve ARIA heading roles for situations where HTML headings aren't feasible, such as in certain dynamic applications or custom components.

Some TestParty features described in this article are currently under development. Visit TestParty.ai to learn more about our current capabilities and roadmap, or book a demo at TestParty.ai/book-a-demo to see TestParty in action.

Disclaimer: Some of this article was generated with Large Language Models (LLMs) and Artificial Intelligence (AI). There may be some errors and we advise you to consult with human professionals for detailed questions.