Here are example form controls with accessibility features added:

Control type: INPUT:

Name

HTML:

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

Control type: TEXTAREA:

Explain your motives:

HTML:

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

Control type: CHECKBOXES:

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:

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

Which is your favorite city? Amsterdam Interlaken Moscow Dresden New York Salt Lake City Logan Buenos Aires Asuncion Hong Kong Tokyo New Dehli

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

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.

Select a web site WebAIM home WAI home Yahoo