WCAG (Level AA) SC 1.3.5 Identify Input Purpose (w3.org)
Issue description
WCAG 1.3.5, “Identify Input Purpose” focuses on making it easier for users to understand the purpose of form fields and other input elements on a web page. This is especially important for people with cognitive disabilities who may have difficulty understanding the context or intent of a form field.
Many websites fail to provide clear and explicit identification of the purpose of input fields. This can happen when:
- Missing labels: Form fields lack descriptive labels that clearly indicate what information is required.
- Ambiguous instructions: Instructions for completing a field are unclear or confusing.
- Unclear error messages: Error messages don’t provide specific guidance on how to correct mistakes.
When the purpose of an input field is not clear, it can lead to:
- Confusion: Users may not understand what information to enter.
- Errors: Users may enter incorrect information, leading to frustration and potential failure to complete the form.
- Accessibility barriers: Users with cognitive disabilities may struggle to understand the context and complete the form successfully.
Essentially, WCAG 1.3.5, “Identify Input Purpose” ensures that the purpose of each input field is clearly identified, making it easier for all users to understand and complete forms accurately. This improves the user experience and promotes inclusivity for people with cognitive differences. Additionally, by enabling an auto-complete function using HTML 5.2 autofill tokens (digitala11y.com), you can passively help input information.
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.
Who this issue impacts
Follow the links for additional information on user impairments:
Suggestions for remediation
Remediating WCAG 1.3.5 “Identify Input Purpose” involves providing clear and explicit identification for all input fields on your website. Here’s how:
Provide clear and descriptive 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 element with the for attribute, matching the id of the input field.
- Example: “Email address:”
Offer clear instructions
- Concise and specific: 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: “Password must be at least 8 characters long and include a number.”
Use placeholder text carefully
- 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.
Provide helpful error messages
- Clear and specific: Provide clear and specific error messages that identify the problem and suggest how to correct it.
- Associate errors: Programmatically associate error messages with the corresponding form field using ARIA attributes like
aria-describedby.- Example: Username is already taken.
Group related fields
- Fieldset and legend: Group related form fields within an element and provide a description. 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.
By following these practices, you can create accessible and user-friendly forms that are easy for everyone to understand and complete, regardless of their cognitive abilities.
