Web Accessibility at the University of California

Label elements in forms for use by assistive technology

• About
• Guiding Principles
• Recommended Standards
• Design Tips
• Technical Topics
• Tools and Testing
• Campus Assistance
• Training for Developers
• Tips for Writers
• Other Resources
• Policy
•  
• Resources Home
• Initiative Home

The Challenge
Online forms are useful for conducting a variety of transactions on the Web, such as purchasing goods, registering for conferences, and completing surveys. When sighted people read a form, they can visually tell that labels and input elements (e.g., text field, radio button, check box) are associated. Thus, they know what boxes to check and fields to complete. People who use assistive technology, though, need the screen reader to associate labels with input elements for them. If the input elements aren't labeled appropriately, the user may complete the wrong field or be unable to access the form at all.

Solutions
Programmatically link the label to the input element so that the screen reader, or assistive technology, associates the two items.

Example:
     Name (first and last name):
The label, "Name (first and last name)," needs to be programmatically associated with the text field.

• Use the <label> tag and associated "for" attribute to tag labels.
  • Identify the exact words to use as the label for the input element and enclose those words in a <label> tag.
  • Use the "for" attribute to identify the input element associated with the label.
• Use the "id" attribute in the associated input element to associate it with the label.
• Each for/id pair value must be unique on the page (For instance, you cannot use for/id="name" more than once per page.)

  Example:
  <label id="name"> Name (first and last name):</label>
  <input type="text" id="name" value="name" size="20" />

• Images used as form entry buttons need to have an appropriate alt attribute describing what they do (alt="Submit"). The alt attribute should match the text on the button. If there is no text on the button, the alt attribute should describe the button's action.

Additional Information

• WebAIM: Creating Accessible Forms
• A List Apart: Articles: Prettier Accessible Forms
• Jim Thatcher: Accessible Forms
• The Web Standards Project: Accessible HTML/XHTML Forms: Intermediate Level