WCAG (Level AAA) SC 2.4.10 Section Headings (W3.org)
Issue description
WCAG 2.4.10, “Section Headings” reinforces the importance of using headings correctly to structure content and improve navigation for users, particularly those who rely on assistive technologies or have cognitive disabilities. This Level AAA criterion builds upon the requirements of Level A and AA by emphasizing the consistent and informative use of headings.
While WCAG 2.4.6 (Headings and Labels) addresses the basic requirements for using headings, some websites still have issues with:
- Inconsistent heading levels: Skipping heading levels (e.g., going from an
<h1>directly to an<h3>) can disrupt the logical structure and make it difficult to understand the hierarchy of the content. - Non-informative headings: Headings that are too generic or don’t accurately reflect the content they introduce can be confusing for users.
- Missing headings: Sections of content might lack headings altogether, making it difficult to understand the organization of the information.
Why section headings matter
- Clear structure: Headings create a clear and consistent structure, making it easier for users to understand the relationships between different sections of content.
- Improved navigation: Headings allow users to quickly navigate to specific sections of the page, especially when using assistive technologies like screen readers.
- Cognitive support: Clear and informative headings help users with cognitive disabilities understand the organization and purpose of the content.
- SEO benefits: Proper use of headings improves search engine optimization (SEO) by providing context and structure to web pages.
WCAG requirements
- No heading levels are skipped: Headings should follow a logical order (e.g.,
<h1>, then<h2>, then<h3>, etc.) without skipping levels. - Headings are informative: Headings should accurately describe the topic or purpose of the section they introduce.
Essentially, this criterion emphasizes the importance of using headings consistently and meaningfully to create a well-structured and accessible web page. This benefits all users, especially those who rely on assistive technologies or have cognitive differences.
Related requirements
The following WCAG source criteria are often related to this as well. They can provide additional insights into specific challenges you may be encountering.
- WCAG (Level A) SC 1.3.1 Info and Relationships
- WCAG (Level A) SC 1.3.2 Meaningful Sequence
- WCAG (Level AA) SC 2.4.6 Headings and Labels
- WCAG (Level A) SC 2.5.3 Label in Name
Read our posts: Put Down the Bold: What You Really Want Is a Heading and Headings Are Vital for Accessibility and SEO.
Who this issue impacts
Follow the links for additional information on user impairments:
Suggestions for remediation
Remediating WCAG 2.4.10, “Section Headings” involves ensuring that headings are used consistently and informatively to structure content. Here’s how:
Use headings to structure content
- Logical hierarchy: Use heading tags (
<h1>to<h6>) to create a clear and meaningful hierarchy of information. Start with<h1>for the main heading, then use<h2>for subheadings,<h3>for sub-subheadings, and so on. - Visual consistency: Use CSS to style headings consistently to provide visual cues about the structure.
Avoid skipping heading levels
- Sequential order: Ensure that heading levels are used in sequential order, without skipping levels. For example, don’t go directly from an
<h1>to an<h3>. Always have an<h2>in between. - Nested sections: If a section with an
<h2>has subsections, use<h3>for those subsections, and so on.
Use descriptive headings
- Clear and concise: Use headings that clearly and concisely describe the topic or purpose of the section they introduce.
- Front-load keywords: Place the most important keywords at the beginning of the heading.
- Avoid ambiguity: Ensure headings are not vague or misleading.
Add missing headings
- Identify sections: Review your content and identify any sections that lack headings.
- Add appropriate headings: Add headings to those sections, using the appropriate heading level based on the hierarchy of the content.
Testing
- Visual inspection: Visually inspect the page to ensure headings are used correctly and consistently.
- Screen reader testing: Test the page with a screen reader to ensure that the headings are conveyed correctly and provide meaningful information to users.
- Outline tools: Use browser developer tools or online outline tools to generate a document outline based on the headings. This can help identify any inconsistencies or missing headings.
Example
If your page has a structure like this:
HTML
<h1>About Us</h1>
<h3>Our Mission</h3>
<p>...</p>
<h3>Our Team</h3>
<p>...</p>
You should change it to:
HTML
<h1>About Us</h1>
<h2>Our Mission</h2>
<p>...</p>
<h2>Our Team</h2>
<p>...</p>
This ensures that the heading levels are used in the correct order and that no levels are skipped.
By following WCAG (Level AAA) SC 2.4.10 Section Headings, you can create content that is well-structured, easy to understand, and accessible to everyone, including those who rely on assistive technologies or have cognitive differences.
