Use valid autocomplete attributes for input fields
Content available in English only.
Accessibility isn't just about avoiding violations — it's about ensuring that everyone can use your product with confidence. This guide explains each rule's intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
Use only valid autocomplete values so browsers and assistive tech understand each field.
Overview
Why this matters
Correct autocomplete tokens help browsers and assistive tech identify field purpose and reduce typing effort. Invalid tokens break autofill and make forms harder for users with cognitive, motor, or memory challenges.
How to fix this issue
Use valid HTML autocomplete tokens for user-data fields (for example `name`, `email`, `street-address`, `postal-code`, `cc-number`, `username`, `new-password`). Remove made-up tokens and keep token values aligned with actual field purpose.
Developer Guidance
Apply this where forms collect user profile/payment/contact data. In shared form components, restrict autocomplete to an allowed enum (TypeScript union) so invalid values fail fast in review/CI.
Code Examples
Incorrect Implementation
<input type='text' autocomplete='mail'>Correct Implementation
<input type='email' autocomplete='email'>Real-World Implementation
Before
<input type='text' autocomplete='user'> <!-- Browser ignores invalid token, autofill fails -->After
<input type='text' autocomplete='username'> <!-- Browser and assistive tech recognize purpose -->Manual Testing
- 1. Identify fields collecting user information (name, email, address, payment, auth).
- 2. Verify each uses a valid autocomplete token and that token matches the field intent.
- 3. Test autofill in at least two major browsers and confirm expected suggestions appear.
- 4. Confirm no invalid custom tokens remain (for example `user`, `mail`, `phone-number`).
- 5. Re-test after fixes to ensure autofill still works for repeated visits.
Related Perceivable Rules
Trusted by organizations across Europe working toward WCAG and EAA conformance