Labels or Instructions:
Understanding SC 3.3.2
Intent of this Success Criterion
The intent of this success criterion is to have content authors place instructions or labels that identify the controls in a form so that users know what input data is expected. Instructions or labels may also specify data formats for fields especially if they are out of the customary formats or if there are specific rules for correct input. Content authors may also choose to make such instructions available to users only when the individual control has focus especially when instructions are long and verbose.
The intent of this Success Criterion is not to clutter the page with unnecessary information but to provide important cues and instructions that will benefit people with disabilities. Too much information or instruction can be just as much of a hindrance as too little. The goal is to make certain that enough information is provided for the user to accomplish the task without undue confusion or navigation.
Note: When labels are provided for input objects, the input object's relationship to the label (or to redundant text serving as the label) must be programmatically determinable or available in text per Understanding Success Criterion 1.3.1 Info and Relationships.
Specific Benefits of Success Criterion 3.3.2:
When label elements are associated with input elements the label is spoken by screen readers when the field receives focus and users with impaired motor control are helped by a larger clickable area for the control, since clicking on the label or the control will activate the control.
Field labels located in close proximity to the associated field assist users of screen magnifiers because the field and label are more likely to visible within the magnified area of the page.
Providing examples of expected data formats help users with cognitive, language and learning disabilities to enter information correctly.
Clearly identifying required fields prevents a keyboard only user from submitting an incomplete form and having to navigate the redisplayed form to find the uncompleted field and provide the missing information.
Examples of Success Criterion 3.3.2
A field which requires the user to enter the two character abbreviation for a US state has a link next to it which will popup an alphabetized list of state names and the correct abbreviation.
A field for entering a date contains initial text which indicates the correct format for the date.
A field for entering a given name is clearly labeled with "Given Name" and the field for family name is labeled "Family Name" to avoid confusion over which name is requested.
A U.S. phone number separates the area code, exchange, and number into three fields. Parentheses surround the area code field, and a dash separates the exchange and number fields. While the punctuation provides visual clues to those familiar with the U.S. telephone number format, the punctuation is not sufficient to label the fields. The single "Phone number" label also cannot label all three fields. To address this, the three fields are grouped in a
fieldsetwith thelegend"Phone number". Visual labels for the fields (beyond the punctuation) cannot be provided in the design, so invisible labels are provided with the "title" attribute to each of the three fields. The value of this attribute for the three fields are, respectively, "Area Code", "Exchange", and "Number".
Related Resources
Resources are for information purposes only, no endorsement implied.
(none currently documented)
Techniques and Failures for Success Criterion 3.3.2 - Labels or Instructions
Each numbered item in this section represents a technique or combination of techniques that the WCAG Working Group deems sufficient for meeting this Success Criterion. However, it is not necessary to use these particular techniques. For information on using other techniques, see Understanding Techniques for WCAG Success Criteria, particularly the "Other Techniques" section.
Sufficient Techniques
G131: Providing descriptive labels AND one of the following:
ARIA2: Identifying a required field with the aria-required property (ARIA)
ARIA9: Using aria-labelledby to concatenate a label from several text nodes (ARIA)
ARIA17: Using grouping roles to identify related form controls (ARIA)
G162: Positioning labels to maximize predictability of relationships
G83: Providing text descriptions to identify required fields that were not completed
H90: Indicating required form controls using label or legend (HTML)
H44: Using label elements to associate text labels with form controls (HTML)
FLASH32: Using auto labeling to associate text labels with form controls (Flash)
FLASH29: Setting the label property for form components (Flash)
FLASH25: Labeling a form control by setting its accessible name (Flash)
PDF10: Providing labels for interactive form controls in PDF documents (PDF)
SL26: Using LabeledBy to Associate Labels and Targets in Silverlight (Silverlight)
H71: Providing a description for groups of form controls using fieldset and legend elements (HTML)
FLASH8: Adding a group name to the accessible name of a form control (Flash)
H65: Using the title attribute to identify form controls when the label element cannot be used (HTML)
SL8: Displaying HelpText in Silverlight User Interfaces (Silverlight)
G167: Using an adjacent button to label the purpose of a field
Note: The techniques at the end of the above list should be considered "last resort" and only used when the other techniques cannot be applied to the page. The earlier techniques are preferred because they increase accessibility to a wider user group.
Additional Techniques (Advisory) for 3.3.2
Although not required for conformance, the following additional techniques should be considered in order to make content more accessible. Not all techniques can be used or would be effective in all situations.
SL19: Providing User Instructions With AutomationProperties.HelpText in Silverlight (Silverlight)
Providing linear form design and grouping similar items (future link)
Common Failures for SC 3.3.2
The following are common mistakes that are considered failures of Success Criterion 3.3.2 by the WCAG Working Group.
Key Terms
- label
text or other component with a text alternative that is presented to a user to identify a component within Web content
Note 1: A label is presented to all users whereas the name may be hidden and only exposed by assistive technology. In many (but not all) cases the name and the label are the same.
Note 2: The term label is not limited to the label element in HTML.