Web Office

N. When electronic forms are designed to be completed online, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

Explanation:

In order for a person using a screen reader to successfully navigate a form, each of the form's labels must be linked to its controls by HTML markup.

To create accessible forms:

1. Place form labels adjacent to their corresponding form controls.
2. Use HTML markup to associate controls explicitly with their labels. For example:
   • Provide markup for labels, using the <label> tag.
   • Group related form elements using the <fieldset> tag.
   • Group checkboxes in a fieldset tag, and provide a <label> for each checkbox.
   • Provide a title or "legend" for each fieldset using the <legend> tag.
3. Always provide a button for users to submit forms. Don't use JavaScript to automatically submit forms.

Example:

First Name
Last Name
Phone
e-mail
Class of 2004 2005 2006	Gender Male Female

source code:

<form name="form2" action method="post">
<table cellSpacing="0" cellPadding="4" width="50%" border="0" style="border-collapse: collapse" bordercolor="#111111">
<td>
<div align="right">
<label for="fname1">First Name</label></div>
</td>
<td><input id="fname1" size="12" name="textfield33"> </td>
</tr>

<tr>
<td>
<div align="right">
<label for="lname1">Last Name</label></div>
</td>
<td><input id="lname1" size="12" name="textfield34"> </td>
</tr>

<tr>
<td>
<div align="right">
<label for="phone1">Phone</label></div>
</td>
<td><input id="phone1" size="12" name="textfield35"> </td>
</tr>

<tr>
<td>
<div align="right">
<label for="e-mail1">e-mail</label></div>
</td>
<td><input id="e-mail1" size="12" name="textfield36"> </td>
</tr>

<tr>
<td bgColor="#CCF4FF" align="left" valign="top"><fieldset>
<legend>Class of</legend>
<br>
<input id="210" type="radio" value="radiobutton13" name="radiobutton3" checked>
<label for="210">2004</label><br>
<input id="211" type="radio" value="radiobutton14" name="radiobutton3">
<label for="211">2005</label> <br>
<input id="212" type="radio" value="radiobutton15" name="radiobutton3">
<label for="212">2006</label>
</fieldset></td>

<td bgColor="#ccccff" align="left" valign="top"><fieldset>
<legend>Gender </legend>
<br>
<input id="male1" type="radio" value="radiobutton9" name="radiobutton4" checked>
<label for="male1">Male</label> <br>
<input id="female1" type="radio" value="radiobutton10" name="radiobutton4">
<label for="female1">Female</label><br>
</fieldset></td>
</tr>

<tr>
<td colspan="2">
<p align="center"><input type="button" value="Submit" name="B1">
</td>
</tr>

</table>
</form>

Back to Creating Accessible Web Sites