8.2 Provide labels for every form element, place correctly, explicitly associate

View correlation with WAI checkpoints

In particular, this helps non-visual users identify the correct label for each form element. It removes ambiguity for all users.

Every form input element must have a label
Use the <label> tag to explicitly associate each label with its input element
Use the <title> attribute liberally:
- Add specific helper information
- Replicate label (some technologies can't handle the label tag)
Position labels properly:
- Text and select elements:
  - Immediately before in the code - to appear to the left of, or immediately above
- Radio buttons and check boxes:
  - To the right
Select unambiguous labels:
- Make as direct and unambiguous as possible
- For radio buttons and checkboxes try to make the label as self explanatory as possible, e.g. 'Yes, I have read the terms and conditions' rather than just 'yes'

Note: Explicit association using the <label> tag means there is some flexibility with regards to position - but avoid strange or remote positions unless absolutely necessary.

ALL elements must have labels. For dates indicate day month and year

place labels for radio buttons and checkboxes to the after (to the right) of the element

Use of the label tag:

<label for="name">Name:</label> <input type="text" id="name" ... >

<input type="radio" id="male" ...> <label for="male">Male</label>

There is another form of usage for the label tag but the above is the most flexible.

Use of the title attribute:

<input type="text" id="name" title="full name" ... >

Rather than have 'yes' / 'no' answers to choices, choose unambiguous statements e.g. Yes, I agree with the terms and conditions

8.2 Provide labels for every form element, place correctly, explicitly associate

Recommendations

Examples