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.

<label for="best-nato-letter">
  The best NATO letter is:
</label>
<input type="text" 
       id="best-nato-letter" 
       aria-describedby="best-nato-letter-hint">

<div class="hint" id="best-nato-letter-hint">
  Example: Alpha, Bravo, Charlie
</div>

The best NATO letter is:

Example: Alpha, Bravo, Charlie

Required input

<label for="second-nato-letter">
 The second NATO letter is: <span>Required</span>
</label>
<input type="text"
       id="second-nato-letter"
       aria-required="true"
       required
       value="Bravo">

The second NATO letter is: Required

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

<label for="first-nato-letter">
  The first NATO letter is:
</label>
<input type="text" 
       id="first-nato-letter" 
       aria-disabled="true"
       value="Alpha"
       readonly>

The first NATO letter is:

Fully disabled input

• Fully disabled inputs are not focusable so may not be as discoverable in a form

<label for="suavest-nato-letter">
  The suavest NATO letter is:
</label>
<input type="text" 
       id="suavest-nato-letter"
       value="Romeo"
       disabled>

The suavest NATO letter is:

readonly input

• Only use readonly when presenting already submitted information.
• readonly inputs are focusable but not editable
• VoiceOver does not describe readonly attribute, so aria-disabled was added to reinforce that it’s not editable

<label for="fourth-nato-letter">
  The fourth NATO letter is:
</label>
<input type="text"
       id="fourth-nato-letter"
       aria-readonly="true"
       aria-disabled="true"
       readonly
       value="Delta">

The fourth NATO letter is:

Email input

• Setting type=”email” changes the keyboard for mobile app users

<label for="email">
  Email address
</label>
<input id="email"
       type="email"
       autocomplete="email"
       spellcheck="false"
       aria-describedby="hint-email">
<div class="hint" id="hint-email">
  We’ll never sell or share your information
</div>
    

Email address

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.

<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>

Enter your personal information

First name Last name Username

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

Further Reading

• WCAG 1.3.1 Info and Relationships (Level A)
• WCAG 1.3.5 Identify Input Purpose (Level AA)
• WCAG 2.1.1 Keyboard (Level A)
• WCAG SC 2.4.6 Headings and Labels (Level AA)
• WCAG 3.3.1 Error Identification (Level A)
• WCAG 3.3.3 Error Suggestion (Level AA)
• WCAG 3.3.2 Labels or Instructions (Level A)
• WCAG 4.1.2 Name, Role, Value (Level A)