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.
Testing
- Identify each form element.
- Find all instructions associated with each element.
- It is a failure if a form element isn't programmatically associated with all instructions. This includes legends, labels, hint text and tooltips.
- A common way of achieving this is using
fieldset
andlegend
tags.Fieldset
is used to group a set of elements.Legend
is the first child of afieldset
tag and provides context for those fields.
- Ensure all field elements are accessible via the keyboard.
- If the form cannot be filled out with just a keyboard, this is a failure.
- Check for title attributes
- Title attributes can be a substitute for labels.
- If the title attributes provides all the related information it passes, if it provides extra information it fails.
- Title attributes are not accessible via keyboard.
Examples
Passes
<fieldset>
<legend>Name</legend>
<label for="firstname">First</label>
<input type='text' id='firstname'><br>
<label for="lastname">Last</label>
<input type='text' id='lastname'>
</fieldset>
<fieldset>
<legend>Favorite Soup?</legend>
<input type='radio' name='soup' value='pea' id='peasoup' title='Pea Soup'><label for="peasoup">Pea Soup</label>
<input type='radio' name='soup' value='chicken' id='chicken' title='Chicken Noodle'><label for="chicken">Chicken Noodle</label>
<input type='radio' name='soup' value='tomato' id='tomato' title='Tomato'><label for="tomato">Tomato</label>
</fieldset>
Name: Each form element has a
label
, and it's associated with thefor
attribute. Thefor
attribute refers to theid
of theinput
. When looking at this form, 'First' and 'Last' wouldn't make sense without 'Name.' This is associated with thefieldset
andlegend
. All elements are wrapped in afieldset
. There can only be onelegend
tag perfieldset
. Anything in thelegend
tag will be associated.
Favorite Soup:
Fieldset
andlegend
is often used for radio buttons as its the easiest way to associate the radio buttons with the question. Notice there are nolabel
s for the radio buttons, but each button has atitle
attribute for assistive technology to read.
Fails
<fieldset>
<legend>Name</legend>
<label for="first_name-2">First</label>
<input type='text' id='firstname-2'>
<label for="1lastname">Last</label>
<input type='text' id='1lastname'>
</fieldset>
<fieldset>
<legend>Favorite Soup?</legend>
<span style='color:#990000;'>This Question Is Required</span>
<input type='radio' name='soup' value='pea' id='pea-2' title='Chick Pea Soup'><label for="pea-2">Pea Soup</label>
<input type='radio' name='soup' value='chicken' id='chicken-2' title='Chicken Noodle'><label for="chicken-2">Chicken Noodle</label>
<input type='radio' name='soup' value='tomato' id='tomato-2' title='Tomato'><label for="tomato-2">Tomato</label>
</fieldset>
<br>
Failure: First name label
for
andid
don't match.
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 affects 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 Mac OSX.
You can test these with your own screen reader. If you have a OSX you can turn VoiceOver on by hitting command+F5.
Further information 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 additional id
s 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 carlabel carmakedescription
Reads both labels indicated by the aria-labelledby
attribute
Please enter Make and Model
<label for="car_4" id="carlabel_4">Car</label>
<input type="text" id="car_4" aria-labelledby="carlabel_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
JAWS reads both the label and the description. So does VoiceOver, but there is a slight delay before it reads the description.
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 Please enter Make and Model