DEV 7.2 Provide labels for every form element, place correctly, explicitly associate

Recommendations

These recommendations help non-visual users identify the correct label for each form element and removes potential ambiguity for all users.

• Label every single form element.
• Explicitly associate each label with its input element:
  • Use the <label> tag:
    • (see code examples;)
  • Use the <title> attribute:
    • Use of forms where there can be no text label:
      • e.g. some search boxes;
    • Use to add specific helper information e.g. formats.
• Position labels properly:
  • Text and select (option) elements:
    • Immediately before in the code;
    • To appear to the left of, or immediately above
  • Radio buttons and check boxes:
    • To the right.
• Make labels unambiguous:
  • Make the text as direct and unambiguous as possible;
  • For radio buttons and checkboxes, try to make the label text 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.

Added benefits: Use of the label tag makes the clickable target larger for radio boxes and check boxes (in many browsers). This is good for everyone but especially those with mobility impairments for whom fine mouse control might be an issue.

Examples