Code examples

Use semantic HTML

This semantic HTML contains all accessibility features by default.

<label for="password">
  Password
  <span class="helper">
    Required
  </span>
</label>
<input type="password"
       id="password"
       minlength="8"
       aria-required="true"
       aria-describedby="password-hint"
       required>
<div id="password-hint">
  <input type="checkbox" id="show-password">
  <label for="show-password">
    Show Password
  </label>
</div>

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 some kind of secure 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