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.

  About our company

When you can’t use semantic HTML

This custom header requires extra attributes.

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

Developer notes


  • Inner text describes the heading


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


  • 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.


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