Making Web Forms Accessible

Thanks to Web Accessibility in Mind (WebAIM)—most of the material below is reproduced directly from the expert advice offered on the WebAIM site.

Add a Label to Every Field

Each form field should have a unique ID, and text associated with that field should be marked as a label "for" that ID.

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

When you have several associated form elements, they can be grouped together by something called a fieldset. Each fieldset should have a legend. The legend is the text that describes the associated group of form items.

<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>

See Creating Accessible Forms for more samples and detailed information.

Mark Up Tables for Accessibility

When presenting information or forms within a table, remember that rows will be read left-to-right and columns will be read top-to-bottom. Be sure related form elements (fields and labels) are adjacent to each other.

When appropriate for the data, designate row and/or column headers using the <th> tag, and associate the cells with the appropriate headers using the scope attribute.

<table>
<caption>Shelly's Daughters</caption>

<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">Birthday</th>
</tr>

<tr>
<th scope="row">Jackie</th>
<td>5</td>
<td>April 5</td>
</tr>

<tr>
<th scope="row">Beth</th>
<td>8</td>
<td>January 14</td>
</tr>

</table>

See Creating Accessible Tables for more samples and detailed information.

Review the Instructions

Use a header to call out any instructions necessary to use a form. Be sure the instructions do not rely upon visual cues, and that all necessary form functions are accessible through keyboard commands.