Code examples
Use semantic HTML
- This semantic HTML contains all accessibility features by default.
- Placing the show password checkbox ahead of the password input increases discoverability for screen reader users.
- CSS pseudo elements are used in the checkbox label to express its state on focus of the password input.
<label for="password">
Password
<span class="helper">
Required
</span>
</label>
<div id="password-hint">
<input type="checkbox" id="show-password">
<label for="show-password">
Show Password
</label>
</div>
<input type="password"
id="password"
minlength="8"
aria-required="true"
aria-describedby="password-hint"
required>
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
Role
- Identifies as some kind of secure input
State
- The show password checkbox should indicate its state on focus
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