Autocomplete valid
Moderate effortFound on 1% of audited stores.
Add valid `autocomplete` attribute values to every form field that collects personal information, using the exact tokens specified by the HTML standard.
What it is
The HTML `autocomplete` attribute tells browsers (and assistive technologies) what kind of data a form field expects — for example, a person's name, email address, shipping street address, or credit card number. WCAG Success Criterion 1.3.5 ("Identify Input Purpose") requires that any field collecting personal information carry a correct, recognised `autocomplete` value from a defined list. If the value is missing, misspelled, or used on the wrong type of field (e.g. `autocomplete="email"` on a password input), browsers and screen readers cannot reliably identify its purpose, and the autocomplete feature breaks.
Why it matters
For users with cognitive disabilities, motor impairments, or low vision, browser autofill is not a convenience — it is often the only practical way to complete a checkout form. An invalid or missing `autocomplete` value means autofill silently fails, forcing customers to type every field manually and dramatically increasing checkout abandonment. WCAG 1.3.5 is a Level AA requirement, which is the legal conformance target in most accessibility laws worldwide (ADA, EAA, AODA, EN 301 549); non-compliance creates real legal exposure. Fixing it also improves Google's Page Experience signals and can lift organic conversion rates, since a frictionless checkout is one of the clearest levers on revenue.
How to fix it
- Audit every form on your store — checkout, login, registration, address book, contact — and list all input fields that collect personal data (name, address, phone, email, payment details, etc.).
- For each field, choose the correct autocomplete token from the official HTML spec list (e.g. `given-name`, `family-name`, `email`, `tel`, `street-address`, `address-line1`, `postal-code`, `cc-number`, `cc-exp`, `new-password`, `current-password`). Refer to the full list in the HTML Living Standard or the Deque/axe rule reference.
- Set the attribute directly on the `<input>` or `<select>` element: `autocomplete="email"`. For multi-section forms (e.g. separate billing and shipping), prefix with a section name and purpose: `autocomplete="shipping street-address"`.
- Never invent values — only use tokens from the approved list. Remove any custom strings that are not in the spec (they are silently invalid).
- For fields where you deliberately want to suppress autofill (e.g. a security-code field), use `autocomplete="off"` or `autocomplete="one-time-code"` as appropriate — never a made-up string.
- Validate the fix by running an axe accessibility scan or opening browser DevTools → Accessibility panel and confirming no `autocomplete-valid` violations remain; also manually test that your browser's autofill correctly populates the fields.
Fix it on your platform
Pick your platform for the exact steps.
How to fix autocomplete valid on Shopify
- Go to Online Store → Themes → Actions → Edit code.
- For the checkout form, Shopify's native checkout is hosted and rendered by Shopify — you cannot edit its HTML directly on standard plans. Shopify already injects correct autocomplete tokens on its default checkout fields.
- For any custom forms in theme files (contact forms, newsletter sign-ups, login/register pages), open the relevant template: `templates/customers/login.liquid`, `templates/customers/register.liquid`, `templates/customers/addresses.liquid`, or `sections/contact-form.liquid`.
- Locate each `<input>` tag and add or correct the `autocomplete` attribute using the approved HTML token (see code snippet).
- On Shopify Plus, if you have checkout.liquid customisation, open `layout/checkout.liquid` and apply the same edits to any custom input fields you have added.
- Save the file, then validate with an axe browser extension on the live page.
How to fix autocomplete valid on WooCommerce
- WooCommerce's core checkout and account forms include autocomplete attributes by default in recent versions. First update WooCommerce to the latest version to get these improvements.
- If you have a custom or third-party checkout plugin overriding the form fields, locate the plugin's template override in your child theme at `woocommerce/checkout/form-billing.php`, `form-shipping.php`, or `form-login.php`.
- Edit each `<input>` element to add the correct `autocomplete` attribute value.
- Alternatively, use the `woocommerce_form_field_args` PHP filter in your child theme's `functions.php` to programmatically inject `autocomplete` values (see code snippet).
- Clear any caching plugin's cache (e.g. WP Super Cache, W3 Total Cache, LiteSpeed Cache) after making changes.
- Validate with an axe browser extension on the checkout and My Account pages.
How to fix autocomplete valid on BigCommerce
- Go to Storefront → My Themes → Advanced → Edit Theme Files (Stencil theme editor).
- For the checkout, BigCommerce uses an optimised one-page checkout rendered by its platform; it already includes standard autocomplete tokens. For customised checkouts using the Checkout SDK, edit your custom checkout component files.
- For account and contact forms, open the relevant Handlebars template files such as `templates/pages/auth/login.html`, `templates/pages/auth/create-account.html`, or `templates/pages/account/edit.html`.
- Find each `<input>` element and add the correct `autocomplete` attribute.
- Download, edit, and re-upload the theme bundle, or use the Stencil CLI for live editing.
- Preview the theme and validate with an axe browser extension before publishing.
How to fix autocomplete valid on Wix
- Open the Wix Editor and select the form widget (Wix Forms) you want to fix.
- Click the form → Settings → click a specific field → look for an 'Advanced' or 'Accessibility' tab where Wix exposes the autocomplete setting for that field type.
- For Wix Studio, open the page in the Dev Mode panel (toggle 'Dev Mode' in the top bar); select the input element and add the `autocomplete` property in the Properties & Events panel on the right.
- In Wix Velo (Dev Mode), you can also set it in code: `$w('#inputEmail').autocomplete = 'email';` inside the page's `onReady` function.
- For Wix eCommerce checkout fields, Wix controls the checkout HTML — submit a feature request via Wix Support if the checkout fields lack proper autocomplete tokens, as direct HTML editing of the Wix checkout is not available.
- Publish the site and validate with the axe DevTools browser extension.
How to fix autocomplete valid on Squarespace
- Squarespace does not provide direct HTML editing of built-in form blocks or checkout fields.
- For built-in Form Blocks (contact, newsletter), Squarespace injects its own markup. You can inject additional attributes via Settings → Advanced → Code Injection (available on Business plan and above) using a JavaScript snippet that sets `autocomplete` on matching inputs after DOM load (see code snippet).
- For Squarespace Commerce checkout, Squarespace controls the checkout page HTML — contact Squarespace Support to report missing autocomplete attributes on checkout fields.
- For any custom HTML blocks containing `<form>` markup (Insert Block → Code), you have full control — add the correct `autocomplete` attribute directly to each `<input>` in your HTML block.
- After injecting JavaScript, publish and verify with the axe browser extension that the violation is resolved.
How to fix autocomplete valid on Webflow
- Open your project in the Webflow Designer.
- Click on the form input element you want to fix.
- In the right-hand Settings panel (gear icon), scroll to the 'Autocomplete' dropdown — Webflow exposes this natively for input elements. Select the correct autocomplete token from the dropdown list.
- If the exact token you need is not in the dropdown, switch to the Element Settings panel and add a custom HTML attribute: click '+ Add Attribute', enter `autocomplete` as the name and the correct token (e.g. `street-address`) as the value.
- For Webflow Ecommerce checkout forms, Webflow renders the checkout — if autocomplete tokens are missing or wrong on the hosted checkout, report it via the Webflow wishlist/support, as direct HTML access to the checkout is limited.
- Publish the site and validate with the axe DevTools browser extension.
How to fix autocomplete valid on Adobe Commerce (Magento)
- Identify the template file responsible for the form field. For checkout, the relevant file is typically `Magento_Checkout/web/template/form/element/input.html` or individual step templates under `Magento_Checkout/view/frontend/web/template/`.
- Create a template override in your custom theme: copy the file to `app/design/frontend/<Vendor>/<Theme>/Magento_Checkout/web/template/` (or the relevant module path) and edit it there — never edit core files directly.
- Locate the `<input>` element in the Knockout.js template and add the `autocomplete` binding: `autocomplete: 'given-name'` inside the `ko` bindings, or add it as a static HTML attribute.
- For customer account forms, override `Magento_Customer/view/frontend/templates/form/` templates (e.g. `edit.phtml`, `register.phtml`) in the same way and add `autocomplete="..."` to each `<input>` tag.
- Run `bin/magento setup:upgrade`, `bin/magento setup:static-content:deploy`, and flush the cache (`bin/magento cache:flush`) after making changes.
- Validate on the frontend with the axe browser extension.
How to fix autocomplete valid on Wix Studio
- Open Wix Studio Editor for your site and enable Dev Mode (toggle in the top bar).
- Select the input element in the canvas or locate it in the Layers panel.
- In the Properties & Events panel on the right, switch to the Code tab; you can set element attributes programmatically using $w('#inputId').setAttribute('autocomplete', 'given-name') in the page's code file.
- Alternatively, open the relevant page's code file (Page Code panel at the bottom) and add $w.onReady(function(){ $w('#firstNameInput').setAttribute('autocomplete','given-name'); }); for each field.
- Preview the page and test autofill in the browser.
Does your site have this issue?
Run a free SEOLZ scan to find autocomplete valid — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Autocomplete valid?
The HTML `autocomplete` attribute tells browsers (and assistive technologies) what kind of data a form field expects — for example, a person's name, email address, shipping street address, or credit card number. WCAG Success Criterion 1.3.5 ("Identify Input Purpose") requires that any field collecting personal information carry a correct, recognised `autocomplete` value from a defined list. If the value is missing, misspelled, or used on the wrong type of field (e.g. `autocomplete="email"` on a password input), browsers and screen readers cannot reliably identify its purpose, and the autocomplete feature breaks.
Why does autocomplete valid matter?
For users with cognitive disabilities, motor impairments, or low vision, browser autofill is not a convenience — it is often the only practical way to complete a checkout form. An invalid or missing `autocomplete` value means autofill silently fails, forcing customers to type every field manually and dramatically increasing checkout abandonment. WCAG 1.3.5 is a Level AA requirement, which is the legal conformance target in most accessibility laws worldwide (ADA, EAA, AODA, EN 301 549); non-compliance creates real legal exposure. Fixing it also improves Google's Page Experience signals and can lift organic conversion rates, since a frictionless checkout is one of the clearest levers on revenue.
How do I fix autocomplete valid?
Add valid `autocomplete` attribute values to every form field that collects personal information, using the exact tokens specified by the HTML standard.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI
- Forms tutorial — W3C WAI