Skip header information, go directly to contentWeb Accessibility Center home page. Web-AIM tutorials. Web Accessibility in Mind (Web-AIM) home page.

Return to Tutorials List

How to Create Accessible Forms

skip the list of pages in this documentPrevious Page | page 1 | page 2 | page 3 | page 4 |

Here are example form controls with accessibility features added:


HTML:

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


Control type: TEXTAREA:


HTML:

<label for="motives">Explain your motives:</label><br>
<textarea id="motives" name="textfield2"></textarea>


Control type: CHECKBOXES:

Choose a color:


HTML

<fieldset>
<legend>Choose a color:</legend><br>
<input id="blue" type="checkbox" name="checkbox" value="checkbox">
<label for="blue">Blue</label><br>
<input id="green" type="checkbox" name="checkbox2" value="checkbox">
<label for="green">Green</label><br>
<input id="yellow" type="checkbox" name="checkbox3" value="checkbox">
<label for="yellow">Yellow</label>
</fieldset>


Control type: RADIO BUTTONS:

Choose a car:


HTML:

<fieldset>
<legend>Choose a car:</legend><br>
<input id="pt" type="radio" name="radio" value="ptcruiser">
<label for="pt">Chrysler PT Cruiser</label><br>
<input id="stratus" type="radio" name="radio" value="stratus">
<label for="stratus">Dodge Stratus</label><br>
<input id="pinto" type="radio" name="radio" value="pinto">
<label for="pinto">Ford Pinto</label>
</fieldset>


Control type: SELECT

HTML:

<label for="favcity">Which is your favorite city?</label>
<select id="favcity" name="favcity">
<option value="1">Amsterdam</option>
<option value="3">Interlaken</option>
<option value="4">Moscow</option>
<option value="5">Dresden</option>
<option value="2">New York</option>
<option value="6">Salt Lake City</option>
<option value="7">Logan</option>
<option value="8">Buenos Aires</option>
<option value="9">Asuncion</option>
<option value="10">Hong Kong</option>
<option value="11">Tokyo</option>
<option value="12">New Dehli</option>
</select>

To improve the accessibility of this list even further, we could add OPTGROUP tags, to group the information (this feature is not yet widely supported in browsers):

<label for="favcity2">Which is your favorite city?</label>
<select id="favcity2" name="favcity2">
<optgroup label="Europe">
<option value="1">Amsterdam</option>
<option value="3">Interlaken</option>
<option value="4">Moscow</option>
<option value="5">Dresden</option>
</optgroup>
<optgroup label="North America">
<option value="2">New York</option>
<option value="6">Salt Lake City</option>
<option value="7">Montreal</option>
</optgroup>
<optgroup label="South America">
<option value="8">Buenos Aires</option>
<option value="9">Asuncion</option>
</optgroup>
<optgroup label="Asia">
<option value="10">Hong Kong</option>
<option value="11">Tokyo</option>
<option value="12">New Dehli</option>
</optgroup>
</select>


Control Type: BUTTON

There are no special HTML tags for buttons. They are accessible as long as you use a standard button.

HTML:

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


Control Type: IMAGE BUTTON

If you use a graphic rather than a standard button, you must include an appropriate alt tag.

HTML:

<input type="image" alt="submit!" border="0" name="imageField" src="graphics/submit.gif" width="109" height="41">


Control Type: JAVASCRIPT JUMP MENUS

Don't use javascript jump menus! These menus are NOT considered keyboard accessible, because you cannot scroll through the list without selecting one of the options. It would be better to provide a submit button separate from the list of choices.

Previous Page | page 1 | page 2 | page 3 | page 4 |

 

Top of Page || Return to Tutorials List

This Tutorial is reproduced on this site with the kind permission of WebAIM. For additional information and resources on web accessibility please visit http://www.webaim.org.

© Copyright 2000-2001 WebAIM. All Rights Reserved. Terms of Use.