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.
<label for="best-letter">
The best NATO letter is:
</label>
<input type="text"
id="best-letter"
aria-describedby="best-letter-hint">
<div class="hint" id="best-letter-hint">
Example: Alpha, Bravo, Charlie
</div>
Example: Alpha, Bravo, Charlie
Required input
<label for="best">
The best NATO letter is: <span>Required</span>
</label>
<input type="text"
id="best"
aria-required="true"
required>
Disabled input
- Disabled inputs should not be focusable
<label for="favorite-disabled">
My favorite NATO letter is:
</label>
<input type="text"
id="favorite-disabled"
disabled>
Group of inputs
After the screenreader focuses on each input, it will read the group name “Enter your personal information” after the input.
<fieldset>
<legend>
Enter your personal information
</legend>
<label for="first-name">
First name
</label>
<input type="text" id="first-name">
<label for="last-name">
Last name
</label>
<input type="text" id="last-name">
<label for="username">
Username
</label>
<input type="text" id="username">
</fieldset>
Developer notes
Name
- Include
for="input-id
in each<label>
label to associate it with the input - Use
aria-label="Input name"
as a last resort if a<label>
can’t be used - Don’t hide the label on focus
Role
- Identifies as a text input
Group
- Include
for="input-id
in each<label>
label to associate it with the input - Use
<fieldset>
and<legend>
to name a group of inputs.
Focus
- Focus must be visible