Disabilities Affected: Cognitive, Visual
Success Criterion: 2.4.10
Section headings are used to organize the content. (Note: This is an organizational requirement, implying headings should be present and used correctly where appropriate, rather than a technical implementation rule like 1.3.1 or 2.4.6).
Why It Matters
Well-structured content with clear headings makes it easier for all users to understand the organization of the page and locate specific information. Users with cognitive or learning disabilities benefit significantly from clear structure. Screen reader users rely heavily on headings (<h1>–<h6> elements) for navigation and understanding page structure.
Fixing the Issue
Divide content into logical sections and use HTML heading elements (<h1> through <h6>) to introduce each section. Ensure the heading text accurately describes the content of the section it precedes. Use heading levels hierarchically (e.g., <h2> for main sections, <h3> for subsections within an <h2>, etc.) without skipping levels. Don’t use heading elements purely for visual styling; use CSS for that. Conversely, don’t use styled text (e.g., bold, larger font) to simulate headings; use actual heading tags.
Good Code Example
Content organized with appropriate HTML headings:
-
<article>
<h1>Understanding Website Accessibility</h1>
<p>Introduction paragraph...</p>
<section>
<h2>Why Accessibility Matters</h2>
<p>Details about the importance...</p>
<h3>Benefits for Users</h3>
<p>Details about user benefits...</p>
<h3>Benefits for Businesses</h3>
<p>Details about business benefits...</p>
</section>
<section>
<h2>Key Principles (WCAG)</h2>
<p>Overview of principles...</p>
<h3>Perceivable</h3>
<p>Details...</p>
<h3>Operable</h3>
<p>Details...</p>
</section>
</article>
Bad Code Example
Content lacking clear headings or using styled text instead:
-
<p style="font-size: 2em; font-weight: bold;">Understanding Website Accessibility</p>
<p>Introduction paragraph...</p>
<p><b>Why Accessibility Matters</b></p>
<p>Details about the importance...</p>
<p><b>Benefits for Users</b></p>
<p>Details about user benefits...</p>
<h2>Key Principles (WCAG)</h2>
<h4>Perceivable</h4> <p>Details...</p>
