Simple Forms

It is quite possible that forms found on the Internet are already accessible if the field names are close to the form elements. The following examples are accessible.

This is an example of a simple form layout; however, you can use other layout approaches like tables, but you must be careful. See below for more on tables.

Back to Top

Layout Tables for Form Elements

Example 1: A layout table that is not accessible

In this example the Name, Age, and Phone text are in completely different rows and cells than each of the text boxes. This provides a very confusing table for the screen reader to speak. In this table, a screen reader would speak the following:

1) Name:
2) Age:
3) Phone:
4) Edit:
5) Edit:
6) Edit:

The word "Edit" is what a screen reader might speak for the text boxes. As you can tell, the blind user would not understand which text box goes with which question.

Example 2: Combine Text and Form Controls in Same Cell

The first way to fix the inaccessible table above is to combine the text with the text box in the same cell. A screen reader would then read the text and the text box in each cell before moving on to the next cell.

Example 3: Changing the Layout to Vertical

You might try changing the table layout from horizontal to vertical to achieve accessibility:

Example 4: Using the Label Tag

Although we stated that example #1 was not accessible, we could make it accessible if we apply a speical HTML "label" tag to each name and associate it with the appropriate text box. We will use the
<label for=" "></label> and the idtag.

Take a look at the code:


<table>
<tr>
<td><label for="name">Name:</label></td>
<td><label for="age">Age:</label></td>
<td><label for="phone">Phone: </label></td>
</tr>
<tr>
<td>
<input id="name" type="text" name="name">
</td>
<td>
<input id="age" type="text" name="age">
</td>
<td>
<input id="phone" type="text" name="phone">
</td>
</tr>
</table>

The examples above are just a few of the ways to make forms accessible. If you would like to explore other options, or if you need help with this, use the Contact Us link on the left.

Back to top

Navigate to other How To pages with the links below.