Web Site Accessibility
Guidelines for SCS Webmasters

What is Accessibility? - Making Your Web Site Accessible
Checklist for Accessibility
Must Have Items - Should Have Items - Try To Have Items
Items for More Experienced Webmasters
Apply These Items if Your Use These Special Features

Forms

Rationale

For general ease of use, it is important for labels to be visually clear and near the corresponding FORM elements, such as text input fields. When the labels are also explicitly associated with the FORM elements through HTML markup, assistive technologies can present the Web author's intention.

Techniques for Forms

The following techniques may be used to meet the checkpoint described in the Special Features - Forms section of the Checklist for Web Site Accessibility.

Associating Labels with Form Controls

Although some form controls, such as submit buttons, are automatically associated with a label, other form controls (text fields, check boxes and radio buttons) do not have implicit labels. If the labels for these controls follow conventions and are positioned immediately to the left of the control or immediately above the control, then assistive technology might be able to determine the intent as conveyed by proximity. However, to ensure the label is explicitly available to assistive technology, you should use the LABEL element to specify labels for controls that do not have implicit labels. Each LABEL element is associated with exactly one form control.

In the first example, the text input fields are programmatically associated with the corresponding label using the LABEL element. The for attribute is used to explicitly associate the label with the control. The value of the for attribute must be the same as the value of the id attribute of the associated control.

<form method="post" action="mailto:collierville.hs@mail.scs.k12.tn.us">
<blockquote>
<label for="Name1"> Name</label><br>
<input name="Name" id="Name1" size=30>
<br>
<label for="Address">Address</label><br>
<input name="Address" id="Address" size=45>
<br>
<input type="submit" value="Submit" name="submit">
<input type="reset" value="Reset" name="reset">
<br>
</blockquote>
</form>

In the next example, the markup for the LABEL element groups the form control with the label. This example is equivalent to the first example.

<LABEL>
Name<br>
<input name="Name" size=30>
</LABEL> <br>
<LABEL>
Address<br>
<input name="Address" size=45>
</LABEL> <br>

In this example, the LABEL element and the for attribute are used to explicitly label radio buttons.

<FORM method=post>
<LABEL for="Q1A">
<input type="radio" name="qn1" value="A" id="Q1A">
A. To the right or below it</LABEL>
<LABEL for="Q1B">
<input type="radio" name="qn1" value="B" id="Q1B">
B. To the left or above it</LABEL>
<LABEL for="Q1C">
<input type="radio" name="qn1" value="C" id="Q1C">
C. Forms don't need labels</LABEL>
<LABEL for="Q1D">
<input type="radio" name="qn1" value="D" id="Q1D">
D. Anywhere near it</LABEL>
</FORM> 

What is Accessibility? - Making Your Web Site Accessible
Checklist for Accessibility
Must Have Items - Should Have Items - Try To Have Items
Items for More Experienced Webmasters
Apply These Items if Your Use These Special Features