Video examples

iOS Voiceover Safari

Android Talkback Chrome

Windows Jaws Chrome

Windows NVDA Chrome

MacOS Voiceover Safari

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 (probably) should not receive focus