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.
<h1>My favorite taco recipe</h1>
<!-- Author's entire life story
as it relates to tacos -->
<h2>Ingredients</h2>
<!-- List of ingredients -->
<h2>Steps</h2>
<h3>Preparing the protein</h3>
<!-- List of instructions -->
<h3>Preparing the vegetables</h3>
<!-- List of instructions -->
<h3>Assembly and plating</h3>
<!-- List of instructions -->
<h2>Nutrition information</h2>
<!-- List of nutrition info -->
<h2>Related receipes</h2>
<!-- List of related recipes -->
Complex headings
- When multiple styles exist inside a heading use spans and css to achieve the desired result.
- Do not use multiple headings.
<h1>
<span class="brand">Apple</span>
<span class="model">iPhone XVI</span>
</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 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. - Repeating patterns of headings are allowed so long as they follow a logical sequence (example:
<h2>
,<h3>
,<h2>
,<h3>
) - Avoid increasing heading levels by more than one level at a time (e.g., do not skip from
<h2>
to<h4>
)
- 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)