Creating Accessible Forms
Accessible Form Controls

Article Contents

  1. Page 1: General Form Accessibility
  2. Page 2: Screen Reader Form Accessibility
  3. Page 3: Accessible Form Controls
    1. Text inputs
    2. Textareas
    3. Checkboxes
    4. Radio buttons
    5. Select menus
    6. Buttons
    7. Image buttons
    8. JavaScript jump menus
  4. Page 4: Using Dreamweaver and FrontPage to Create Accessible Forms

Text inputs

Here's the HTML markup:

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

Notice the for and id values are the same, thus associating the label with the appropriate form element. 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.

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>

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>

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. Note that the optgroup tag is not fully supported by some user agents and screen readers. In cases where optgroup is not supported, it is simply ignored and will not cause any accessibility issues.

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>

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

Most browsers allow you to select multiple, non-adjacent items with the keyboard by using the arrow keys or CTRL plus the arrow keys to navigate and the space bar to select/deselect individual options. However, in Internet Explorer, you can only activate this keyboard functionality by pressing Shift + F8 while in the multiple select menu. Because of the obscurity of this shortcut and functionality, it is recommended that multiple select menus be avoided. 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 buttons will be accessible as long as you use a standard button that has a descriptive value. The value attribute will be read by screen readers when the button is accessed.

Here's the HTML markup:

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

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="submit!" src="submit.gif" />

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

WebAIM is an initiative of:
Center for Persons with Disabilities (CPD) Utah State University