WCAG (Level A) SC 3.3.2 Labels or Instructions (w3.org)
Issue description
WCAG 3.3.2, “Labels or Instructions” is about making sure users can easily understand how to interact with forms and other input fields on your website. This is important for everyone, but especially for people with cognitive disabilities or those who may be unfamiliar with the content.
Many websites fail to provide clear labels or instructions for input fields. This can lead to:
- Confusion: Users might not understand what information is needed or how to provide it correctly.
- Errors: Users might enter incorrect information, leading to frustration and potential failure to complete the form.
- Accessibility barriers: Users with cognitive disabilities may struggle to understand what is expected of them and how to interact with the form.
WCAG requirements
This guideline requires that labels or instructions are provided when content requires user input. This means:
- Clear labels: Each form field should have a visible label that clearly identifies its purpose.
- Instructions (if needed): If the purpose of the field or the required format is not clear from the label alone, provide additional instructions to guide users.
- Association: Labels and instructions should be programmatically associated with their corresponding form fields, so assistive technologies can convey the information to users.
Benefits
- Improved user experience: Clear labels and instructions help users understand and complete forms more easily.
- Reduced errors: It helps prevent users from making mistakes and reduces frustration.
- Enhanced accessibility: It makes forms more accessible to users with cognitive disabilities.
Essentially, WCAG (Level A) SC 3.3.2 Labels or Instructions ensures that users have the guidance they need to interact with forms and input fields effectively. This makes the website more user-friendly and accessible for everyone.
Related requirements
The following WCAG source criteria are often related to this as well. They can provide additional insights into specific challenges you may be encountering.
- WCAG (Level A) SC 2.5.3 Label in Name
- WCAG (Level A) SC 3.3.1 Error Identification
- WCAG (Level AA) SC 3.3.3 Error Suggestion
- WCAG (Level A) SC 4.1.2 Name, Role, Value
- WCAG (Level AA) SC 4.1.3 Status Messages
Who this issue impacts
Follow the links for additional information on user impairments:
Suggestions for remediation
Remediating WCAG 3.3.2, “Labels or Instructions” involves providing clear and understandable labels and instructions for all form fields and input elements on your website. Here’s how:
Provide clear labels
- Visible labels: Ensure every form field has a visible label that clearly identifies its purpose. Use concise and descriptive language that accurately reflects the expected input.
- Associate labels: Programmatically associate labels with their corresponding form fields using the
<label>element with theforattribute, matching theidof the input field.- Example:
<label for="email">Email address:</label> <input type="email" id="email" name="email">
- Example:
Offer instructions when necessary
- Clear and concise: Provide clear and concise instructions to help users understand how to complete the field, especially if it requires specific data formats, restrictions, or input methods.
- Placement: Place instructions near the relevant field, either before, after, or beside it, ensuring a clear visual and programmatic association.
- Example:
<input type="password" id="password" name="password"> <span id="passwordHelp" class="help-text">Password must be at least 8 characters long and include a number.</span>
- Example:
Consider placeholder text
- Supplemental guidance: Use placeholder text within the input field to provide additional hints or examples of the expected input. However, don’t rely solely on placeholders as labels, as they might disappear when the user starts typing or may not be accessible to all users.
Group related fields
- Fieldset and legend: Group related form fields within a
<fieldset>element and provide a descriptive<legend>. This helps users understand the relationship between fields and improves overall form structure.
Testing
- Assistive technologies: Test your forms with screen readers to ensure labels and instructions are correctly conveyed to users.
- Keyboard navigation: Ensure that users can navigate through the form and access all labels and instructions using only the keyboard.
Example
Instead of this:
HTML
<input type="text" name="phone" placeholder="Phone number">Use this:
HTML
<label for="phone">Phone number:</label>
<input type="tel" id="phone" name="phone" placeholder="e.g., (555) 555-5555">
<span id="phoneHelp" class="help-text">Please enter your phone number in the format (XXX) XXX-XXXX.</span>This revised code provides a clear label, descriptive placeholder text, and additional instructions to help users understand how to provide their phone number correctly.
By following these practices, you can create accessible and user-friendly forms that are easy for everyone to understand and complete.
