Labels

The primary distinction between an accessible form and a non-accessible one is the use of the <label> tag for prompts.

Labels allow screen readers to programmatically associate the prompt text (eg "Your name") with the appropriate input.

When a screen reader accesses a form item that has a <label> element associated with it, it will read the text within the <label> element and indicate the type of form item it is (e.g., "Name. Text box." or "Age. Check box").

• Use the <label> tag on:
  1. Text Fields
  2. Checkboxes
  3. Radio Buttons
  4. Select Menus
• Buttons are already associated with a label. These do not need to use the <label> element.
• Place labels adjacent to input fields. If someone is using a magnifier, only small sections of the screen are visible at one time, so it's important that the label is as close to the control as possible.
• It's not enough to place the label adjacent to the control. A screen reader needs to know programatically which label is assigned to which control via two matching tags: the for attribute on the <label> element, and the id attribute (usually) on the corresponding control.
• If using a label is not possible because of something like space (for example, the second line of addresses), use the title attribute on the control. This technique should only be used as a secondary technique. Screen readers first look for the <label> tag.