How to Use Heading Level Structure Correctly for Accessibility

Guidance:

• Heading levels should be used like you are creating a page outline
• There should be only one Heading 1 (<h1>) on a page [3]
• Heading level formatting must be used ONLY for headings, not for visual emphasis
• Normal text formatting must NOT be used if the text is actually a heading
• Heading levels should be used in the correct order
• The most important heading has the rank 1 (<h1>), the least important heading rank 6 (<h6>). Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section. [1]

Why Should I Care?

• Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies (like screen readers) can use them to provide in-page navigation. [1]
• WCAG 2.4.6 Headings and Labels: Headings and labels describe topic or purpose. [2]
  • Intent of this Success Criterion:
    • The intent of this Success Criterion is to help users understand what information is contained in Web pages and how that information is organized. When headings are clear and descriptive, users can find the information they seek more easily, and they can understand the relationships between different parts of the content more easily. Descriptive labels help users identify specific components within the content.
    • Labels and headings do not need to be lengthy. A word, or even a single character, may suffice if it provides an appropriate cue to finding and navigating content.

Example:

Resource(s)

• [1] https://www.w3.org/WAI/tutorials/page-structure/headings/
• [2] https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html
• [3] https://dequeuniversity.com/checklists/web/headings
• Accessibility Index: https://ultra.guide/bin/view/Accessibility/AccessibilityIndex