WebAIM: Creating Accessible Forms – Accessible Form Controls

Creating Accessible Forms
Accessible Form Controls

You are here: Home > Articles > Forms > Page 2: Accessible Form Controls

Article Contents

Page 1: General Form Accessibility

Current page: Page 2: Accessible Form Controls

Text Inputs

Textareas

Checkboxes

Radio Buttons

Other Input Types

Select Menus

Buttons

Image Buttons

JavaScript Jump Menus

Important Attributes

Autocomplete

Required Fields

aria-invalid

Page 3: Advanced Form Labeling

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” [...]