Additional Resources

Explicitly defining relationships between controls and labels - WAI recommended technique.

Go to the WAVE home page - The WAVE is an automated tester which reads the underlying HTML of a web page and returns a report that shows the reading order.

View WAI checkpoint 12.4 - Associate labels explicitly with their controls.

View WAI checkpoint 10.2 - Until user agents support explicit associations between labels and form controls, for all form controls with implicitly associated labels, ensure that the label is properly positioned.

 

Priority 1 Item 15
Use markup to associate all form controls with their labels.

There are two simple techniques to insure that your form controls meet the requirements of the Web Content Accessibility Guidelines for the State of Kansas:

1. Always make sure that the field text is placed close to the associated input field, either immediately above, or immediately to the left or immediately to the right (depending on the input or interaction element).

2. Always use the LABEL element to specifically associate the label text with the INPUT element or use the title attribute on every INPUT element specifying the elements purpose.

Proper Techniques

The best way to insure that your form fileds can be read by screen readers is to place both the form text and the input field within the label tag.

Name

HTML
<label>Name
<input type="text" name="textfield2">
</label>

If you prefer to place your field text in the table cell directly before the input field, you can do the following. Just be sure to include the label id for the input field.

Name

HTML
<tr>
<td width="134"><p>
<label for="label3">Name</label>
</p></td>
<td width="135">
<input type="text" name="textfield3" id="label3"></td>
</tr>

 

Below is an example of a simple form that contains many of the elements of a simple form.

Example of an Accessible Form - Common forms will contain the following elements.
Text Field		Select menu Select Items Item One Item Two Item Three
Radio Button	Check Box	Submit Button

The HTML

<form action="would link to a cgi script" method="post">
<p>
<label>Text Field
<input name="textfield" type="text" title="The title appears appears when you rest your mouse over the text box.">
</label>
...
<label>
Select menu
<select name="select">
<option>Select Items</option>
<option>Item One</option>
<option>Item Two</option>
<option>Item Three</option>
</select>
</label>
...
<label>
<input type="radio" name="radiobutton" value="radiobutton" title="Radio Button title.">
Radio Button
</label>
...
<label>
<input type="checkbox" name="checkbox" value="checkbox" title="Check Box title.">
Check Box
</label>
...
<label>
Submit Button
<input type="submit" name="Submit" value="Send me in!">
</label>
...
</form>

 

Examples of Inaccessible Layout - Don't do the following.

Remember, layout tables are linerized when read by screen readers. By placing the form text in row one and the input fields in row two, the screen reader will read your form as:

Screen reader output: "Name Rank Serial Number [input] [input] [input]."

Row One	Name	Rank	Serial Number
Row Two

 

Placing multiple form text in column one and multiple input fields in column two, a screen reader will read your form as:

Typical screen reader output: "Name Rank Serial Number [input] [input] [input]."

Column One	Column Two
Name Rank Serial Number