Labels

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

Note: in the 2021 WebAIM Million analysis 54.4% of home pages had missing form labels!! 45% of the 4.4 million form inputs identified were not properly labeled (either via <label>, aria-label, or aria-labelledby). Comment: Not properly labeled because of mis-matched values in paired attributes (for & id).

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:
  • Text Fields (<input type="text">, <textarea>)
  • Checkboxes (<input type="checkbox">)
  • Radio Buttons (<input type="radio">)
  • Select Menus (<select>)
• Place labels above or 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.