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.
Complex headings
- When multiple styles exist inside a heading use spans and css to achieve the desired result.
- Do not use multiple headings.
When you can’t use semantic HTML
This custom header requires extra attributes.
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.
- It should be rare that
- Subsections with
- Title major sections with
Focus
- Headings must not receive focus
- Arrow keys will browse headings (not the tab key)