We rely on digital forms for a wide range of activities, from making online purchases to booking medical appointments. And when forms aren’t accessible, users with disabilities may face unnecessary roadblocks to completing everyday tasks. Thankfully, the Web Content Accessibility Guidelines (WCAG)—the global standard for digital accessibility—outline best practices for designing forms all users can interact with. Specifically, WCAG 3.3.2 Labels or Instructions states that digital content creators should provide clear, detailed labels or instructions for forms and other input fields. In this article, we’ll dive deeper into what WCAG 3.3.2 is, why it’s important, and how to implement it effectively.
What is WCAG 3.3.2 Labels or Instructions?
WCAG 3.3.2 is a WCAG success criterion which states that labels or instructions should be provided for digital content that requires user input. In simpler terms, this means that whenever users need to input information—like filling out a form—they should be given clear and descriptive labels or instructions to guide them. This practice is important for making content understandable, one of WCAG’s four core principles: perceivable, operable, understandable, and robust (POUR).
Why is WCAG 3.3.2 important?
Meeting WCAG 3.3.2 is critical to making digital content accessible for some individuals with cognitive disabilities, as well as for screen reader users. Users with cognitive disabilities may struggle with ambiguous or missing labels, and providing clear instructions allows these individuals to navigate forms and complete tasks without frustration. Additionally, screen reader users may need labels to determine what input is required by a form field.
However, adhering to WCAG 3.3.2 doesn’t just benefit people with disabilities. Clear labels and instructions make it easier, and more efficient, for all users to complete digital forms without making mistakes. This not only increases user satisfaction, but may also improve form completion rates, as individuals are more likely to fill out forms they can understand.
How to implement WCAG 3.3.2 Labels or Instructions
Ready to begin improving form accessibility on your site? The following steps will help you satisfy WCAG 3.3.2.
1. Use descriptive labels.
Make sure every form field has a label that clearly communicates what information is needed. For example, if a field requires both a user’s first and last name, ensure the label reads “Full Name” rather than “Name” to avoid ambiguity.
2. Place labels close to input fields.
Place labels near their respective input fields so users can easily understand which labels apply to which fields. This is especially important for making forms accessible to users of screen magnification.
3. Provide instructions when necessary.
If form input needs to be written in a certain way, or follow other rules, provide users with specific instructions. For example, if a password must be at least eight characters long, include this information near the password field.
4. Use ARIA labels for complex forms.
For more complex forms, consider incorporating Accessible Rich Internet Applications (ARIA) labels to provide additional context for screen reader users. Screen readers interpret ARIA labels to describe the purpose of interactive web elements, such as form fields, when it may not be immediately obvious to users.
5. Test with screen readers.
Regularly test your forms with screen readers—or engage an accessibility expert to perform this testing—to ensure that labels and instructions are being interpreted correctly.
Common mistakes to avoid
As you make an effort to meet WCAG 3.3.2 and enhance the usability of your forms, be sure to avoid the following common mistakes.
1. Using placeholder text as labels
Contrary to popular belief, placeholder text inside input fields isn’t a substitute for labels. Placeholder text disappears when a user starts typing, which may lead to confusion.
2. Using ambiguous labels
Vague labels, like “info,” may not provide users with enough context. Make sure labels clearly describe the type of information a user needs to input.
3. Failing to correctly associate labels with input fields
Labels must be correctly associated with their corresponding input fields. This is usually accomplished using the “for” attribute in HTML, which links a label to the corresponding input field’s ID.
4. Overloading forms with instructions
While instructions are important for explaining specific requirements, too many directions can overwhelm users. Keep instructions concise and relevant to the task at hand.
Create intuitive forms for every user
Online forms are everywhere—and all users, regardless of disability, need access to usable forms to participate in day-to-day life. By providing clear form labels and instructions, in accordance with WCAG 3.3.2, you can take an important step toward creating a more inclusive and intuitive web experience.
