Skip to main content Skip to navigation

Forms

Making forms accessible is a simple process. Each form element should be associated with its instructions and errors, and everything should be accessible via the keyboard.

For more information, please visit https://www.w3.org/WAI/tutorials/forms/.

Testing

  1. Identify each form element.
  2. Find all instructions associated with each element.
    • If a form element isn’t programatically associated with ALL instructions, this is a failure.
  3. Ensure all field elements are accessible via the keyboard.
    • If the form cannot be filled out with just a keyboard, this is a failure.
  4. Check for title tags
    • Title tags can be a substitute for labels.
    • If the title tag provides all the related information it passes, if it provides extra information it fails.
    • Title tags are not accessible via keyboard.

Examples

PASSES

Name




Favorite Soup?

 Pea Soup
 Chicken Noodle
 Tomato

<fieldset>
  <legend>Name</legend>
  <label for="firstname">First&nbsp;</label>
  <input type='text' id='firstname'><br>
  <label for="lastname">Last&nbsp;</label>
  <input type='text' id='lastname'>
</fieldset>

<fieldset>
  <legend>Favorite Soup?</legend>
  <input type='radio' name='soup' value='pea' id='pea' title='Pea Soup'>&nbsp;Pea Soup<br>
  <input type='radio' name='soup' value='chicken' id='chicken' title='Chicken Noodle'>&nbsp;Chicken Noodle<br>
  <input type='radio' name='soup' value='tomato' id='tomato' title='Tomato'>&nbsp;Tomato
</fieldset>

Name: Each form element has a label, and its associated with the for tag. The for tag refers to the id of the input. When looking at this form, ‘First’ and ‘Last’ wouldn’t make sense without ‘Name.’ This is associated with the fieldset and legend. All elements are wrapped in a fieldset. There can only be one legend tag per fieldset. Anything in the legend tag will be associated.

Favorite Soup: Fieldset and legend is often used for radio buttons as its the easiest way to associate the radio buttons with the question. Notice there are no labels for the radio buttons, but each button has a title tag for assistive technology to read.

FAILS

Name




Favorite Soup?

This Question Is Required

 Pea Soup
 Chicken Noodle
 Tomato

<fieldset>
  <legend>Name</legend>
  <label for="first_name-2">First&nbsp;</label>
  <input type='text' id='firstname-2'><br>
  <label for="1lastname">Last&nbsp;</label>
  <input type='text' id='1lastname'>
</fieldset>

<fieldset>
  <legend>Favorite Soup?</legend>
  <p><span style='color:red;'>This Question Is Required</span></p>
  <input type='radio' name='soup' value='pea' id='peasoup' title='Chick Pea Soup'>&nbsp;Pea Soup<br>
  <input type='radio' name='soup' value='chicken' id='chicken' title='Chicken Noodle'>&nbsp;Chicken Noodle<br>
  <input type='radio' name='soup' value='tomato' id='tomato' title='Tomato'>&nbsp;Tomato
</fieldset>
<br>

Failure: First name label for and id don’t match.

Failure: Last name has an invalid id.

Failure: “This Question Is Required” is not associated with the form fields.

Failure: The title tag for Pea Soup indicates it’s ‘Chick Pea Soup.’ This information is not available to keyboard, sighted users.

HOW ARIA AFECTS FORM INPUTS

Screen readers vary on what they read and the additional information they provide by default. This is a broad summary of what is read based on VoiceOver for macOS.

You can test these with your own screen reader. If you have macOS, you can turn voice over on by hitting command+f5.

TL;DR Using aria-label or aria-labelledby will cause a screen reader to only read them and not the default label. If you want an input to read from multiple things like an error message, use aria-labelledby and pass it the for attribute of the label and any aditional ids you want read. ex. aria-labelledby='car1 car_description car-error-message'

No ARIA

Reads just the label and not the description



Please enter Make and Model

<label for="car_1">Car</label>
<input type="text" id="car_1"/><br/>
<span id="carmakedescription_1"><i>Please enter Make and Model</i></span>

Screen Reader reads input as: Car Edit text


With aria-label

Reads the aria-label and doesn’t read the normal label.



Please enter Make and Model

<label for="car_2">Car</label>
<input type="text" id="car_2" aria-label="Car, please enter make and model" /><br/>
<span id="carmakedescription_2"><i>Please enter Make and Model</i></span>

Screen Reader reads input as: Car, please enter make and model Edit text


With aria-labelledby pointing at carmakedescription

Reads only the aria-labelledby attribute and not the default label



Please enter Make and Model

<label for="car_3">Car</label>
<input type="text" id="car_3" aria-labelledby="carmakedescription_3" /><br/>
<span id='carmakedescription_3'><i>Please enter Make and Model</i></span>

Screen Reader reads input as: Please enter Make and Model Edit text


With aria-labelledby pointing at car carmakedescription

Reads both labels indicated by the aria-labelledby attribute



Please enter Make and Model

<label for="car_4">Car</label>
<input type="text" id="car_4" aria-labelledby="car_4 carmakedescription_4" /><br/>
<span id='carmakedescription_4'><i>Please enter Make and Model</i></span>

Screen Reader reads input as: Car Please enter Make and Model Edit text


With aria-describedby pointing at carmakedescription

Voiceover only reads the label, Jaws should read the description as well



Please enter Make and Model

<label for="car_5">Car</label>
<input type="text" id="car_5" aria-describedby="carmakedescription_5" /><br/>
<span id='carmakedescription_5'><i>Please enter Make and Model</i></span>

Screen Reader reads input as: Car Edit text

Validating Input

Bring info in from https://www.w3.org/WAI/tutorials/forms/validation/

The original text for this document was created by the 18F and made available in the public domain under the CC0 1.0 Universal license.

Washington State University has made modifications to the original document. These changes are also licensed as CC0 1.0. Please feel free to reuse this content.