autocomplete-valid
Web validation
autocomplete attribute must use a valid token for every form field that collects personal data.When a form field's purpose is identified with a valid autocomplete token, browsers and assistive technology can autofill saved values and identify the field's purpose. Correct tokens reduce typing effort and let personalization tools recognize each field, for example by adding familiar icons.
Invalid or mismatched tokens prevent autofill from working and stop browsers and other tools from identifying the field's purpose.
Pass Patterns
First name field with correct token
This input tells the browser it expects the user's first name.
<label for="fname">First name</label>
<input id="fname" name="fname" type="text" autocomplete="given-name" />Credit card number field with correct token
This input correctly marks a credit card number field.
<label for="cc-num">Credit card number</label>
<input id="cc-num" name="cc-num" type="text" autocomplete="cc-number" />Fail Patterns
Invalid token on a city field
The token location is not on the allowed list, so the field's purpose cannot be determined.
<label for="city">City</label>
<input id="city" name="city" type="text" autocomplete="location" />Mismatched token on a phone field
The phone field is identified as email, a token that doesn't fit a tel input, which confuses autofill.
<label for="phone">Phone number</label>
<input id="phone" name="phone" type="tel" autocomplete="email" />WCAG techniques
Sufficient techniques
Failure techniques
Try It Yourself
Using browser autofill
- Make sure the browser has saved autofill data (name, address, payment).
- Load the page and move focus to the field, or start typing in it.
Expected results: The browser offers matching saved values for the field.
Actual results: No suggestions appear, or the browser suggests the wrong kind of data.
Inspecting the browser dev-tools
- Open the Elements panel and select a target input element.
- Check the
autocompleteattribute value against the Input Purposes for User Interface Components list. - Verify the token matches the actual purpose of the field.
Expected results: The value matches an item on the list and corresponds to the field's purpose.
Actual results: A value not on the list, or a value that does not match the field's purpose, fails this check.
FAQ
How does this issue relate to 1.3.5 Identify Input Purpose?
SC 1.3.5 requires that fields collecting personal data expose their purpose programmatically. Using a valid autocomplete token satisfies that requirement by letting technology determine and convey the input's meaning.
Why is this issue marked as Serious?
If the purpose is missing or wrong, browsers and personalization tools cannot identify the field, and autofill cannot populate stored data. These gaps slow users, increase input errors, and can block completion of critical tasks such as checkout or sign-up forms.
Standards and Regulations
| Standard | Success Criterion | Reference |
|---|---|---|
| WCAG 2.2 | 1.3.5 Identify Input Purpose (AA) | The purpose of each input field collecting information about the user can be programmatically determined when the field serves a common, identified purpose, and the content is implemented using technologies that support identifying the expected meaning for form input data. |
| EN 301 549 | 9.1.3.5 Identify Input Purpose | Same as the WCAG text. |