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="favorite">
  My favorite NATO letter is:
</label>
<input type="text" id="favorite" aria-describedby="hint">
<div class="hint" id="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-describedby="hint"
       aria-required="true"
       required>
<div class="hint" id="hint">
  Example: Alpha, Bravo, Charlie
</div>
Example: Alpha, Bravo, Charlie

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