New address: 24 Farnsworth Street, Boston, MA 02210-1409.

Search Our Site

Page Navigation

Section Banner

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.

For more information contact web @ uua.org.

This work is made possible by the generosity of individual donors and congregations. Please consider making a donation today.

Last updated on Wednesday, March 30, 2011.

Sidebar Content, Page Navigation

 

Updated and Popular

Recently Updated

For Newcomers

Learn more about the Beliefs & Principles of Unitarian Universalism, or read our online magazine, UU World, for features on today's Unitarian Universalists. Visit an online UU church, or find a congregation near you.

Page Navigation