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>
  About our company
</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 should 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 should not receive focus
  • Arrow keys will browse headings (not the tab key)