1.3.5 Identify Input Purpose
Introduction
This check ensures that websites provide autocomplete attributes for form inputs and that they align with their intended purpose.
What
The autocomplete attribute helps browsers suggest relevant values when users fill out forms.
When an input field includes an autocomplete attribute, it should correctly describe the type of data being requested.
Common autocomplete values include:
autocomplete="name" for full nameautocomplete="email" for email addressesautocomplete="tel" for phone numbersautocomplete="street-address" for street addresses
When is this applicable?
This check applies to web pages that contain input fields with an autocomplete attribute.
Why
Proper use of the autocomplete attribute enhances both usability and accessibility in the following ways:
- It saves time because it allows browsers to autofill fields with stored user data.
- It reduces errors for users with cognitive disabilities, dyslexia, or mobility impairments.
- It improves consistency because it ensures that data is entered in a standardized format.
When autocomplete attributes are incorrectly assigned, users may experience:
- Autofill suggestions that do not match the expected input.
- Confusion about what information is required.
- Frustration when forms do not fill in correctly.
Examples
This section provides pass and fail examples of this check.
Pass examples
Correct autocomplete values that match the purpose of the input field:
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="email">
</form>
The autocomplete="email" attribute in this example correctly identifies the field as an email input.
A form with properly assigned autocomplete attributes for multiple fields:
<form>
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname" autocomplete="given-name">
<label for="lname">Last Name:</label>
<input type="text" id="lname" name="lname" autocomplete="family-name">
</form>
The given-name and family-name values ensure that the browser autofills the first and last names separately.
Fail examples
Incorrect or misleading autocomplete attributes:
<form>
<label for="phone">Phone Number:</label>
<input type="text" id="phone" name="phone" autocomplete="street-address">
</form>
In this example, autocomplete="street-address" is incorrect for a phone number field.
Irrelevant autofill suggestions.
The autocomplete value does not match the expected input type:
<form>
<label for="email">Email:</label>
<input type="text" id="email" name="email" autocomplete="password">
</form>
In this example, autocomplete="password" is not appropriate for an email field.
Non-existent or custom value:
<form>
<label for="dob">Date of Birth:</label>
<input type="text" id="dob" name="dob" autocomplete="dateofbirth">
</form>
In this example, autocomplete="dateofbirth" is not a valid attribute.
The correct value is autocomplete="bday".
Affected users
This check primarily benefits:
- Users with motor impairments who rely on autofill to minimize typing.
- Users with cognitive disabilities who may struggle with form completion.
- Blind and visually impaired users who use screen readers that announce autofill suggestions.
How
This section provides instructions on how to review and fix autocomplete issues.
How to review autocomplete attributes
When this check flags an input field, follow these steps:
Identify the purpose of the field.
Read the field label and determine the kind of data that is expected, for example, name, email, or address.
- Check the
autocomplete attribute.- Open Developer Tools (F12) → Elements Tab.
- Locate the
<input> element. - Check the value of its
autocomplete attribute.
- Compare with valid
autocomplete values.
How to fix it
This section provides several methods that you can use to fix the issue.
Use the correct autocomplete value.
Ensure that the autocomplete attribute accurately describes the input field:
<input type="tel" id="phone" name="phone" autocomplete="tel">
Remove or correct invalid autocomplete values.
If there is an incorrect or custom autocomplete value, update it or remove it:
<!-- Incorrect -->
<input type="text" id="dob" name="dob" autocomplete="dateofbirth">
<!-- Correct -->
<input type="text" id="dob" name="dob" autocomplete="bday">
Use standardized field names.
Some browsers rely on input name attributes for autofill suggestions. Use consistent names to improve autofill accuracy:
<input type="text" name="street-address" autocomplete="street-address">
Additional resources
WCAG Success Criteria
1.3.5 Identify Input Purpose
Ensure input fields with autocomplete attributes align with their intended purpose
1.3.5 Identify Input Purpose
Introduction
This check ensures that websites provide autocomplete attributes for form inputs and that they align with their intended purpose.
What
The autocomplete attribute helps browsers suggest relevant values when users fill out forms.
When an input field includes an autocomplete attribute, it should correctly describe the type of data being requested.
Common autocomplete values include:
autocomplete="name" for full nameautocomplete="email" for email addressesautocomplete="tel" for phone numbersautocomplete="street-address" for street addresses
When is this applicable?
This check applies to web pages that contain input fields with an autocomplete attribute.
Why
Proper use of the autocomplete attribute enhances both usability and accessibility in the following ways:
- It saves time because it allows browsers to autofill fields with stored user data.
- It reduces errors for users with cognitive disabilities, dyslexia, or mobility impairments.
- It improves consistency because it ensures that data is entered in a standardized format.
When autocomplete attributes are incorrectly assigned, users may experience:
- Autofill suggestions that do not match the expected input.
- Confusion about what information is required.
- Frustration when forms do not fill in correctly.
Examples
This section provides pass and fail examples of this check.
Pass examples
Correct autocomplete values that match the purpose of the input field:
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="email">
</form>
The autocomplete="email" attribute in this example correctly identifies the field as an email input.
A form with properly assigned autocomplete attributes for multiple fields:
<form>
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname" autocomplete="given-name">
<label for="lname">Last Name:</label>
<input type="text" id="lname" name="lname" autocomplete="family-name">
</form>
The given-name and family-name values ensure that the browser autofills the first and last names separately.
Fail examples
Incorrect or misleading autocomplete attributes:
<form>
<label for="phone">Phone Number:</label>
<input type="text" id="phone" name="phone" autocomplete="street-address">
</form>
In this example, autocomplete="street-address" is incorrect for a phone number field.
Irrelevant autofill suggestions.
The autocomplete value does not match the expected input type:
<form>
<label for="email">Email:</label>
<input type="text" id="email" name="email" autocomplete="password">
</form>
In this example, autocomplete="password" is not appropriate for an email field.
Non-existent or custom value:
<form>
<label for="dob">Date of Birth:</label>
<input type="text" id="dob" name="dob" autocomplete="dateofbirth">
</form>
In this example, autocomplete="dateofbirth" is not a valid attribute.
The correct value is autocomplete="bday".
Affected users
This check primarily benefits:
- Users with motor impairments who rely on autofill to minimize typing.
- Users with cognitive disabilities who may struggle with form completion.
- Blind and visually impaired users who use screen readers that announce autofill suggestions.
How
This section provides instructions on how to review and fix autocomplete issues.
How to review autocomplete attributes
When this check flags an input field, follow these steps:
Identify the purpose of the field.
Read the field label and determine the kind of data that is expected, for example, name, email, or address.
- Check the
autocomplete attribute.- Open Developer Tools (F12) → Elements Tab.
- Locate the
<input> element. - Check the value of its
autocomplete attribute.
- Compare with valid
autocomplete values.
How to fix it
This section provides several methods that you can use to fix the issue.
Use the correct autocomplete value.
Ensure that the autocomplete attribute accurately describes the input field:
<input type="tel" id="phone" name="phone" autocomplete="tel">
Remove or correct invalid autocomplete values.
If there is an incorrect or custom autocomplete value, update it or remove it:
<!-- Incorrect -->
<input type="text" id="dob" name="dob" autocomplete="dateofbirth">
<!-- Correct -->
<input type="text" id="dob" name="dob" autocomplete="bday">
Use standardized field names.
Some browsers rely on input name attributes for autofill suggestions. Use consistent names to improve autofill accuracy:
<input type="text" name="street-address" autocomplete="street-address">
Additional resources
WCAG Success Criteria
1.3.5 Identify Input Purpose
Web Governance