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.
Why this matters and how to fix it
Why this matters
Valid `autocomplete` values allow browsers, password managers, and assistive technologies to recognize the purpose of form fields. Missing or incorrect values increase input effort and reduce accessibility for users with cognitive or mobility impairments.
How to fix this issue
Use only valid autocomplete tokens as defined in the HTML specification, such as `name`, `email`, `street-address`, `postal-code`, `cc-number`, `username`, or `new-password`. Avoid custom or unsupported values.
Developer guidance
Audit forms collecting personal information. Validate autocomplete attributes against the WHATWG specification. In component libraries, enforce valid autocomplete props (e.g., TypeScript unions) to prevent invalid values and ensure consistent accessibility and autofill support.
Code examples
Incorrect Implementation
<input type='text' autocomplete='mail'>Correct Implementation
<input type='email' autocomplete='email'>Real-World Examples
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. Inspect each input field collecting user information.
- 2. Verify the `autocomplete` attribute uses a valid token from the HTML spec.
- 3. Test autofill behavior in major browsers to confirm recognition.
- 4. Test form completion using assistive technology (screen reader) to ensure field purpose is announced.
- 5. Correct any invalid or missing autocomplete values and re-test.
Trusted by organizations across Europe working toward WCAG and EAA conformance