WCAG Principle: Perceivable
Guideline 1.3: Adaptable (Create content that can be presented in different ways without losing information or structure)
Conformance Level: AA (Recommended Requirement)
What is Success Criterion 1.3.5?
The purpose of each input field collecting information about the user can be programmatically determined when:
- The input field serves a purpose identified in the Input Purposes for User Interface Components section; and,
- The content is implemented using technologies with support for identifying the expected meaning for form input data.
This success criterion aims to simplify the process of filling out forms, especially for people with cognitive disabilities. It requires that the purpose of a form input field can be understood by assistive technology to present it to users in different ways. This includes using visible labels, instructions, and the HTML autocomplete attribute to identify specific types of user input. In the future, new technology may offer automated methods to identify input fields based on specific user needs, resulting in a more user-friendly web experience.
How does it make your website accessible?
People with certain disabilities (e.g. motor and cognitive disabilities) may have difficulties remembering details which affects their ability to fill forms correctly. When a user enables autofill and stores personal information in the settings, browsers and assistive technology will suggest values to complete fields. This reduces typing errors and makes data entry faster and more accurate for everyone.
Who benefits?
- People with language and memory disabilities, or disabilities that affect their executive function and decision-making abilities.
- People with cognitive or learning disabilities who may prefer images for communication.
- People with motor impairments who need less manual input when filling out forms.
- People who prefer the convenience of using autocomplete features.
How to Meet Success Criterion 1.3.5
What you should do:
- Provide well-labelled and programmatically determinable input fields.
- Ensure that the token values for autocomplete attribute are appropriate.
How to test if you've met compliance:
- Check if form fields have valid and well-formed autocomplete attributes and value pairs.
- Check if the purpose of the form field indicated by the label corresponds with the autocomplete token on the input.
If #1 and #2 are true, you’ve met this success criterion.
Bad and Good Examples (with Developer Code)
BAD Code Snippet
<form>
<label for="username">Enter Username:</label>
<input type="text" id="username" name="username" />
<label for="password">Enter Password:</label>
<input type="password" id="password" name="password" />
<button type="submit">Submit</button>
</form>
In this code snippet, there are no autocomplete attributes defined for any of the input fields. It uses the <for> attribute instead of <htmlFor> in the label element, which may create accessibility problems. Moreover, the input fields don’t have a value attribute, which can create difficulty in pre-filling the fields whenever required.
good Code Snippet
<form>
<label htmlFor="username">
Enter Username:
<input type="text" id="username" name="username" autoComplete="username" value={username} onChange={handleUsernameChange} />
</label>
<label htmlFor="password">
Enter Password:
<input type="password" id="password" name="password" autoComplete="current-password" value={password} onChange={handlePasswordChange} />
</label>
<button type="submit">Submit</button>
</form>
This code snippet adds autocomplete attributes to input fields to make them valid and well-formed. It uses the <htmlFor> attribute in the label element instead of <for> attribute to enhance screen accessibility. Additionally, it defines value attributes for the input fields, which can be useful in pre-filling these fields if necessary.
Frequently Asked Questions
What is success criterion 1.3.5?
Success Criterion 1.3.5 is a guideline that requires the use of descriptive labels for input fields to ensure that users with disabilities can understand the purpose of the field.
Are there any tools or resources available to help me implement success criterion 1.3.5?
Yes, various tools and resources are available to help you implement success criterion 1.3.5. For example, automated testing tools like WAVE and ARIA compliance checker can help identify issues with form labels.
Can I use placeholder text as a label for my input fields?
No, you should not use placeholder text as a label for input fields because it disappears once the user starts typing and may not be available to assistive technology. Instead, use descriptive labels for input fields.
What should I do if my input fields are generated dynamically or through scripting?
If input fields are generated dynamically or through scripting, make sure you label them properly using the appropriate markup or code. This may involve using ARIA attributes, for example.
How can I ensure that my input fields are accessible to users with cognitive or learning disabilities?
To ensure that input fields are accessible to users with cognitive or learning disabilities, provide clear and concise labels that accurately describe the purpose of the field. You should also use consistent and predictable formatting and layout to help users understand how to interact with the input fields. Providing additional cues or feedback, such as error messages or confirmation messages, can also be helpful.
