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 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.
- It should be rare that
- Subsections with
- Title major sections with
Focus
- Headings should not receive focus
- Arrow keys will browse headings (not the tab key)