2.16 Associate labels explicitly with their controls

"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.

Rationale

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

- View WAI checkpoint 12.4