Scripts and Forms
Labels and Forms
WAI Definition (Checkpoint 12.4)
Associate labels explicitly with their controls.
Explanation
In web forms, form fields should be associated with labels to describe their purpose, using structural markup.
Rationale
It is good practice to position labels so that the visual relationship with corresponding form controls is clear.
However, if the relationship between labels and form controls is only visible, but not explicitly defined in the underlying HTML, older browsers and screen-reader users may not understand the form and the purpose of each field.
This does not apply to hidden fields.
Technique
Every descriptive label (description of the purpose of the field) should be tagged as <label> and associated with the name of the field. The “for” attribute of the <label> tag is used by modern screen readers to identify a field reached by tabbing. The field should have the corresponding “id” attribute.
Without this, tabbing between fields is completely disorienting.
Example
XHTML
<label for="fname">Name</label>
<input type="text" name="name" id="fname" tabindex="1" />
Validation
Test
Using the Firefox Web Developer's Toolbar (plugin):
Go to Form > View form information.
Success Criteria
Each visible field is associated with a descriptive label.