Video examples

iOS Voiceover Safari

Android Talkback Chrome

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>
  <h2>Ingredients</h2>
  
  <h2>Steps</h2>

    <h3>Preparing the protein</h3>
    <h3>Preparing the vegetables</h3>
    <h3>Assembly and plating</h3>
  
  <h2>Nutrition information</h2>
  
  <h2>Related receipes`</h2>

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.

Focus

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