Autocomplete valid

What it is

The HTML `autocomplete` attribute tells browsers (and password managers, screen readers, and autofill tools) exactly what kind of information a form field expects — for example, a shipping first name, a credit card number, or an email address. WCAG 2.1 Success Criterion 1.3.5 ("Identify Input Purpose") requires that any field collecting personal information uses one of the officially recognised `autocomplete` token values, and that the token actually matches what the field is for. If the attribute is missing, misspelled, or set to the wrong value (e.g., `autocomplete="firstname"` instead of `autocomplete="given-name"`), browsers cannot reliably autofill the field and assistive technologies cannot identify its purpose.

Why it matters

Failing WCAG 1.3.5 creates real legal and commercial risk: accessibility laws in the US (ADA), UK (Equality Act), EU (European Accessibility Act), and elsewhere increasingly require WCAG 2.1 AA compliance, and incorrect `autocomplete` is a straightforward, auditable violation. Beyond compliance, customers — especially those with motor disabilities, cognitive impairments, or anyone on a mobile device — rely on browser autofill to complete checkout quickly. Broken autofill adds friction that directly increases cart abandonment and reduces conversion rates. Fixing it is one of the fastest wins you can get on a checkout or registration form.

How to fix it

1. Identify every form field that collects personal information (name, address, email, phone, payment details, username, password, birthday, etc.).
2. For each field, look up the correct WCAG/HTML autocomplete token from the official list (e.g., `given-name`, `family-name`, `email`, `tel`, `street-address`, `postal-code`, `cc-number`, `new-password`, `current-password`, `bday`, etc.).
3. Set the `autocomplete` attribute on the `<input>` (or `<select>`) element to exactly that token — the value must be a valid token and must match the field's actual purpose.
4. Ensure the form itself does NOT have `autocomplete='off'` unless there is a specific security reason (e.g., OTP fields); that attribute blocks all autofill for the entire form.
5. Test by opening the page in a browser, clicking into each field, and verifying the browser's autofill dropdown appears with the correct suggestion — or use an axe DevTools browser extension to re-run the `autocomplete-valid` rule.
6. Repeat for every form on the site: checkout, registration, login, address book, and contact forms.

<input type="text"   name="first_name"  autocomplete="given-name"     placeholder="First name">
<input type="text"   name="last_name"   autocomplete="family-name"    placeholder="Last name">
<input type="email"  name="email"        autocomplete="email"           placeholder="Email address">
<input type="tel"    name="phone"        autocomplete="tel"             placeholder="Phone number">
<input type="text"   name="address1"    autocomplete="address-line1"   placeholder="Street address">
<input type="text"   name="city"        autocomplete="address-level2"  placeholder="City">
<input type="text"   name="postcode"    autocomplete="postal-code"     placeholder="Postcode / ZIP">
<input type="text"   name="cc_number"   autocomplete="cc-number"       placeholder="Card number">
<input type="password" name="password"  autocomplete="current-password" placeholder="Password">

Fix it on your platform

Pick your platform for the exact steps.

Frequently asked questions

Authoritative references

• How to fix this specific rule — Deque/axe (rule reference)
• WCAG 2 overview — W3C WAI
• Forms tutorial — W3C WAI