HomeCheckpoint 6.1 - Core
All form controls must have a label element
WCAG 1.0 Priority 2
WCAG Guideline 12. Provide context and orientation information.
People using screen readers rely on the label of the field to understand what information needs to be inputted. People who have cognitive impairments often need extra guidance when filling out a form.
<label> elements associated with form controls allow a direct association between the control's text description and the control.
Requirement
Where descriptive text is not a component of the form control, ensure all form controls are implicitly or explicitly associated with their respective label via a <label> element.
Recommendation
It is preferable to explicitly specify the for attribute of the label element to extend the clickable area of the <label> element, as this reduces the precision required when navigating with a mouse or other pointing device in cases where motor skills are reduced.
Implicit Use: <label>First Name: <input type="text" name="firstname"></label>
Explicit Use: <label for="fname">First Name:</label><input type="text" name="firstname" id="fname">
When used explicitly, the </label> tag can be placed after the specific form element if desired, but gives no change in functionality.
Descriptive text is contained in the value attribute of submit buttons and in the alt attribute of submit images so these don't require label elements.
Checking Tool
- Internet Explorer - AIS toolbar:
Structure > Fieldset / Labels - Firefox - Web Developer's Toolbar:
Forms > View Form Information
Information Source
The original source of this information is located on the W3C web site (www.w3.org/TR/WCAG10-TECHS/#tech-unassociated-labels)
Back to Core Guidelines