Video examples

iOS Voiceover

Android Talkback

Windows Jaws Chrome

Windows NVDA Chrome

MacOS Voiceover Safari

Headings are not focusable with the tab key

  • When people use a screen reader, the arrow keys are used to browse non-focusable content
  • The tab key only focuses interactive elements (ex: buttons, links or inputs)

Code examples

Use semantic HTML

This semantic HTML contains all accessibility features by default.

<h1>My favorite taco recipe</h1>
  <!-- Author's entire life story 
   as it relates to tacos -->

  <h2>Ingredients</h2>
  <!-- List of ingredients -->

  <h2>Steps</h2>

    <h3>Preparing the protein</h3>
    <!-- List of instructions -->

    <h3>Preparing the vegetables</h3>
    <!-- List of instructions -->
    
    <h3>Assembly and plating</h3>
    <!-- List of instructions -->
  
  <h2>Nutrition information</h2>
  <!-- List of nutrition info -->
  
  <h2>Related receipes</h2>
  <!-- List of related recipes -->

Complex headings

  • When multiple styles exist inside a heading use spans and css to achieve the desired result.
  • Do not use multiple headings.
<h1>
  <span class="brand">Apple</span> 
  <span class="model">iPhone XVI</span> 
</h1>

When you can’t use semantic HTML

This custom header requires extra attributes.

<div role="heading" aria-level="1">
  About our company
</div>

Developer notes

Name

  • Inner text describes the heading

Role

  • Semantic headings <h1> <h2> <h3> identify themselves as headings and express the level
  • Use role="heading" aria-level="1" to for custom elements

Group

  • Headings must be logically ordered.
  • Start with a single <h1> per page.
    • Title major sections with <h2>
      • Subsections with <h3>
        • It should be rare that <h4> and beyond is required.
        • Repeating patterns of headings are allowed so long as they follow a logical sequence (example: <h2>,<h3>,<h2>,<h3>)
        • Avoid increasing heading levels by more than one level at a time (e.g., do not skip from <h2> to <h4>)

Focus

  • Headings must not receive focus
  • Arrow keys will browse headings (not the tab key)

Further Reading