Skip to main content

Accessibility UI Guidelines: Headings

Headings

2.4 Headings

Proper use of headings is essential for creating a clear content structure, enhancing navigability, and improving accessibility for all users, including those utilising assistive technologies.

2.4.1 Hierarchical Structure

Use headings in a hierarchical manner to reflect the document structure. Start with a single <h1> for the main title, followed by <h2> for primary sections, <h3> for subsections, and so on. This hierarchy helps users understand the organisation of content and navigate efficiently.


<!-- Native HTML example -->
<h1>Main Title</h1>
<h2>Section 1</h2>
<h3>Subsection 1.1</h3>
<h2>Section 2</h2>
<h3>Subsection 2.1</h3>

<!-- ARIA example -->
<div role="heading" aria-level="1">Main Title</div>
<div role="heading" aria-level="2">Section 1</div>
<div role="heading" aria-level="3">Subsection 1.1</div>
<div role="heading" aria-level="2">Section 2</div>
<div role="heading" aria-level="3">Subsection 2.1</div>

2.4.2 Descriptive Headings

Ensure that each heading clearly and concisely describes the content that follows. Descriptive headings provide users with a quick understanding of the section's purpose, aiding in content scanning and comprehension.


<h2>Benefits of Responsive Design</h2>
<p>Responsive design ensures that your website looks great on all devices...</p>

2.4.3 Avoid Skipping Heading Levels

Do not skip heading levels (e.g., jumping from <h1> to <h3>). Maintaining a logical flow of heading levels ensures that assistive technologies can accurately interpret the document structure.


<!-- Correct -->
<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>

<!-- Incorrect -->
<h1>Main Title</h1>
<h3>Subsection Title</h3>

2.4.4 Semantic Use of Headings

Utilise headings to convey semantic meaning rather than for visual styling purposes. Avoid using headings solely to change text size or appearance. Instead, use CSS for styling and maintain proper heading semantics for accessibility.


<!-- Correct -->
<p>Responsive design ensures that your website looks great on all devices...</p>
<h2 role="presentation">Responsive design ensures that your website looks great on all devices...</h2>

<!-- Incorrect -->
<h2>Responsive design ensures that your website looks great on all devices...</h2>

2.4.5 Accessible Navigation

Headings play a crucial role in enabling keyboard and screen reader users to navigate content efficiently. Implement skip links and ensure that heading levels are used consistently to facilitate quick navigation between sections.


<a href="#main-content" class="skip-link">Skip to main content</a>
<h1 id="main-content">Welcome to Our Website</h1>
2.4.6 Consistent Styling Apply consistent styling to headings to maintain visual coherence across the website. Use CSS classes or styles to ensure that headings of the same level have uniform appearance, enhancing the user experience without compromising accessibility.

2.4.7 ARIA Roles and Landmarks

While headings themselves are inherently semantic, combining them with ARIA roles and landmarks can further enhance accessibility. Use ARIA attributes judiciously to define regions of the page, aiding assistive technologies in understanding the layout.


<header role="banner">
    <h1>Website Title</h1>
    <nav role="navigation">
        <ul>
            <li><a href="#section1">Section 1</a></li>
            <li><a href="#section2">Section 2</a></li>
        </ul>
    </nav>
</header>

2.4.8 Testing and Validation

Regularly test your headings with various assistive technologies and validation tools to ensure they meet accessibility standards. Tools like screen readers can help verify that headings are announced correctly and that the document structure is logical.


// Example: Using a screen reader to navigate headings
// Ensure that headings are announced in the correct order and hierarchy

Best Practices for Headings

  • Use Only One <h1>: Ensure that each page has a single <h1> tag representing the main title. This helps search engines and assistive technologies understand the primary topic of the page.
  • Maintain Logical Order: Follow a sequential order of headings without skipping levels to maintain a clear content hierarchy.
  • Avoid Overuse: Do not use headings excessively. Use them to denote major sections and subsections only.
  • Accessible Naming: Choose meaningful and descriptive names for headings to provide context to all users.
  • Prioritize Native HTML Headings Over ARIA Roles: Use native HTML heading tags (<h1<, >h2<, etc.) to define headings, rather than relying on ARIA roles. Native headings are more semantically meaningful and better supported by screen readers and other assistive technologies.