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)
Bad example
- Divorce styles and token names from markup completely
- Directly styling headings forces heading order to lose meaning
h1 {
font-size: 32px;
}- While this seems better, it really isn’t.
- Even though
class="h1"could be applied to any element, developers WILL interpret this as<h1 class="h1">
.h1 {
font-size: 32px;
}Good example
- Set all headings to a small default to force devs to seek correct styles
- Choose naming conventions without implied semantics
h1, h2, h3, h4, h5, h6 {
font-size: 16px;
font-weight: normal;
}
.text-display-huge {
font-size: 48px;
}
.text-display-large {
font-size: 32px;
}
.text-display-medium {
font-size: 24px;
}
.text-display-default {
font-size: 16px;
}- Styles are now separated from markup
- This allows the preservation of good heading structure and flexibility in design
<h1 class="text-display-medium">
Shop
</h1>
<h2 class="text-display-huge">
Our biggest coffee sale of the year
</h2>
<h3 class="text-display-large">
Light roast liquidations
</h3>
<h3 class="text-display-large">
Medium roast markdowns
</h3>
<h3 class="text-display-large">
Dark roast deals
</h3>When you can’t use semantic HTML
This custom header requires extra attributes.
<div role="heading" aria-level="1">
About our company
</div>