Video examples
iOS Voiceover
Android Talkback
Windows Jaws Chrome
Windows NVDA Chrome
MacOS Voiceover Safari
Code examples
Use semantic HTML
This semantic HTML contains all accessibility features by default.
Example: Alpha, Bravo, Charlie
Required input
Disabled but focusable input
- There may be times that it is advantageous for the input to be disabled but still focusable
- Fully disabled inputs are not focusable and may not be as discoverable in a form
- Use readonly to prevent editing
Fully disabled input
- Fully
disabled
inputs are not focusable so may not be as discoverable in a form
readonly
input
- Only use readonly when presenting already submitted information.
readonly
inputs are focusable but not editable- VoiceOver does not describe
readonly
attribute, soaria-disabled
was added to reinforce that it’s not editable
Email input
- Setting type=”email” changes the keyboard for mobile app users
We’ll never sell or share your information
Group of inputs
After the screenreader focuses on each input, it will read the group name “Enter your personal information” after the input.
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