Creating Accessible Forms
Accessible Form Controls
Article Contents
Text Inputs
Name:
<label for=”name”>Name:</label>
<input id=”name” type=”text” autocomplete=”name”>
Matching for and id values associate the label with its form control. Because id attribute values must be unique on each page, a form control can only have one associated <label>.
Note
Another benefit of labels is that the user can click on the label to set focus to the form control. This is useful on small screens and to some people with motor disabilities, particularly when targeting small checkboxes and radio buttons.
Clicking on labels is also an easy way to check for proper form labeling. If clicking the label sets focus to or activates the form control, then that label is programmatically associated.
Text Areas
Enter your address:
<label for=”address”>Enter your address:</label><br>
<textarea id=”address” autocomplete=”street-address”></textarea>
Checkboxes
Select your pizza toppings: Ham
Pepperoni
Mushrooms
Olives
<fieldset>
<legend>Select your pizza toppings:</legend>
<input id=”ham” type=”checkbox” name=”toppings” value=”ham”>
<label for=”ham”>Ham</label><br>
<input id=”pepperoni” type=”checkbox” name=”toppings” value=”pepperoni”>
<label for=”pepperoni”>Pepperoni</label><br>
<input id=”mushrooms” type=”checkbox” name=”toppings” value=”mushrooms”>
<label for=”mushrooms”>Mushrooms</label><br>
<input id=”olives” type=”checkbox” [...]