Creating Accessible Forms
Accessible Form Controls

Text inputs

Here's the HTML markup:

<label for="name">Name:</label>
<input id="name" type="text" name="textfield">

Matching for and id values associate the label with the appropriate form control. Because id must be unique on each page, only one label can be associated to each unique form element. This means you cannot have one label for multiple form elements. Additionally, screen readers do not support multiple labels that are associated to the same form element.

Note

Another benefit of using labels is that the user can click on the label itself to set focus to the form element. This is useful to some with motor disabilities, particularly when selecting small checkboxes and radio buttons. You can try this by clicking on the word "Name:" above to see focus set to the text box. Clicking adjacent labels provides an easy way to check for proper form labeling.

Textareas


Here's the HTML markup:

<label for="address">Enter your address:</label><br>
<textarea id="address" name="addresstext"></textarea>

Checkboxes

Select your pizza toppings:


Here's the HTML markup:

<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" name="toppings" value="olives">
<label for="olives">Olives</label>
</fieldset>

The <fieldset> surrounds the entire grouping of radio buttons. The <legend> provides a description for the grouping. In screen readers, the legend text is generally read for each control in the fieldset, so the legend text should be brief and descriptive.

Radio buttons

Choose a shipping method:

Here's the HTML markup:

<fieldset>
<legend>Choose a shipping method:</legend>
<input id="overnight" type="radio" name="shipping" value="overnight">
<label for="overnight">Overnight</label><br>
<input id="twoday" type="radio" name="shipping" value="twoday">
<label for="twoday">Two day</label><br>
<input id="ground" type="radio" name="shipping" value="ground">
<label for="ground">Ground</label>
</fieldset>
Note

Fieldset and legend should only be used to associate groups of controls when a higher level description (i.e., the legend) is necessary. Single checkboxes or basic radio buttons (such as male/female for gender) that make sense from their labels alone do not require fieldset and legend. Nested fieldsets should generally be avoided.

Select menus

Here's the HTML markup:

<label for="favcity">Choose your favorite city?</label>
<select id="favcity" name="select">
<option value="1">Amsterdam</option>
<option value="2">Buenos Aires</option>
<option value="3">Delhi</option>
<option value="4">Hong Kong</option>
<option value="5">London</option>
<option value="6">Los Angeles</option>
<option value="7">Moscow</option>
<option value="8">Mumbai</option>
<option value="9">New York</option>
<option value="10">Sao Paulo</option>
<option value="11">Tokyo</option>
</select>

To improve the accessibility of this list even further, we could add optgroup, to group the options.

Here's the HTML markup:

<label for="favcity2">Choose your favorite city?</label>
<select id="favcity2" name="favcity2">
<optgroup label="Asia">
  <option value="3">Delhi</option>
  <option value="4">Hong Kong</option>
  <option value="8">Mumbai</option>
  <option value="11">Tokyo</option>
</optgroup>
<optgroup label="Europe">
  <option value="1">Amsterdam</option>
  <option value="5">London</option>
  <option value="7">Moscow</option>
</optgroup>
<optgroup label="North America">
  <option value="6">Los Angeles</option>
  <option value="9">New York</option>
</optgroup>
<optgroup label="South America">
  <option value="2">Buenos Aires</option>
  <option value="10">Sao Paulo</option>
</optgroup>
</select>

Note that optgroup is not fully supported by some user agents and screen readers, so it should not be relied on to present vital category information. In cases where optgroup is not supported, it is simply ignored. Do not confuse the label attribute of the optgroup element with the label element. They are very different things.

Multiple select menus allow the user to choose more than one option from the list.

Note

It is recommended that multiple select menus be avoided. Not all browsers provide intuitive keyboard navigation for multiple select menus. Many users do not know to use CTRL/Command or Shift + click to select multiple items. Typically, a set of check box options can provide similar, yet more accessible functionality.

Buttons

For form buttons (submit and reset input elements and button elements), no additional accessibility information is required. The value attribute for input buttons and the nested text for <button> elements will be read by screen readers when the button is accessed. These must never be left empty.

Here's the HTML markup:

<input type="submit" name="submit" value="Submit Search">
<input type="reset" name="reset" value="Reset">
<button>Activate</button>

Because reset buttons can be inadvertently selected, there are few cases when they should be provided.

Image buttons

If you use an image button (<input type="image"> rather than a standard button, the input must have appropriate alt text.

Here's the HTML markup:

<input type="image" name="submitbutton" alt="search" src="submit.png">

JavaScript jump menus

Because these types of menus are activated when the menu item changes, these menus can cause keyboard accessibility issues because you cannot scroll through the list without selecting one of the options.

Note

Some browsers (including Firefox) override these jump menus so they are not activated on keyboard change, but only after you either select an item using a mouse or press Enter if using the keyboard.

Providing a submit button separate from the list of choices that activates the currently selected item will allow full keyboard accessibility