2.16 Associate labels explicitly with their controls
WAI checkpoint 12.4
Full WAI text: "Associate labels explicitly with their controls."
Examples of controls include text entry fields and checkboxes.
"Labels" are the names of form control elements, e.g. "first name" could be the label for a form element which could be a text entry field. In this case, the field name could be visually presented immediately above or to the left of the field. Associating the label with the form control by positioning the two as near as possible is called implicit labelling.
The relationship between the labels and control elements should be defined in the underlying HTML.
It is good practice to position labels so the visual relationship with corresponding form controls is clear. However, if the relationship between labels and form controls is not explicitly defined in the underlying HTML, older browsers or assistive technologies may fail to accurately present the form.
Directions and Techniques
Label forms with the correct HTML
See WAI recommended techniques for explicitly defining relationships between controls and labels See also this example from IBM which shows how to label different types of form control
How you could check for this:
Test with a screen reader or audio browser
Testing with a screen reader or audio browser will show you how the form labels and controls are associated.
Test the reading order of the form with The WAVE
The WAVE is an automated tester which reads the underlying HTML of a web page and returns a report that shows the reading order. This is a very useful tool for testing pages with forms as it shows how implicitly labelled forms would be read by a screen reader or text only browser. Go to the WAVE home page