How to fix autocomplete valid on Adobe Commerce (Magento)

Steps for Adobe Commerce (Magento)

1. Autocomplete attributes live in the PHTML template files for each form (checkout, customer registration, address book).
2. To customise safely, create a theme override: copy the relevant template from vendor/magento/module-checkout/view/frontend/templates/ (e.g., shipping-address/form.phtml) or module-customer into app/design/frontend/Vendor/Theme/ preserving the module path.
3. Open the copied PHTML file, locate each <input> element, and add or correct the autocomplete attribute using the correct HTML token.
4. For the Checkout page, the shipping and billing address forms are rendered via Knockout JS UI components; edit the corresponding .html template in Magento_Checkout/web/template/shipping-address/ or billing-address/ within your theme.
5. Run bin/magento cache:flush and bin/magento setup:static-content:deploy, then verify the rendered HTML contains the correct autocomplete values.

<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">

What is autocomplete valid?

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.

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.

See the complete Autocomplete valid guide for every platform and the full background.