Autocomplete needs a valid value
- Rule:
axe/autocomplete-valid - Checks: autocomplete attribute must be used correctly
- WCAG: 1.3.5
- Fix class:
mechanical: A fix needs no authored text or visual decision.
Who it affects
Section titled “Who it affects”- People with cognitive, learning or attention disabilities.
- People with limited dexterity, who need targets large enough to hit.
How to fix it
Section titled “How to fix it”The value is not a token HTML defines, such as first-name, phone or zip
Section titled “The value is not a token HTML defines, such as first-name, phone or zip”Use the HTML token for what the field asks, such as given-name, tel or postal-code. Choose it from the field’s label and purpose, not from its name or id.
<label for="zip">ZIP code</label><input type="text" id="zip" autocomplete="postal-code">Several tokens are in the wrong order or do not belong together
Section titled “Several tokens are in the wrong order or do not belong together”Order them as HTML requires: an optional section- name, an optional shipping or billing, an optional home, work, mobile, fax or pager (only before a phone, email or impp token), the field’s token, and an optional final webauthn.
<label for="work-phone">Work phone</label><input type="tel" id="work-phone" autocomplete="work tel">axe asks for review of a value such as gender or pronouns
Section titled “axe asks for review of a value such as gender or pronouns”Use a standard token if one fits: sex is HTML’s token for gender identity. If none fits, remove the attribute, since WCAG asks only for the purposes on its list.
Fixes that fail
Section titled “Fixes that fail”Removing the attribute, or setting it to off, on a field that asks for the user’s own name, email, address or similar
Section titled “Removing the attribute, or setting it to off, on a field that asks for the user’s own name, email, address or similar”axe accepts both, but the field then no longer identifies its purpose to browsers and assistive tools. WCAG 1.3.5 asks that of a field about the user whose purpose is on its list.
Inventing a value to stop browser autofill, such as autocomplete="nope"
Section titled “Inventing a value to stop browser autofill, such as autocomplete="nope"”It is not a token, so axe reports it, and the field loses its purpose. Use off to ask browsers not to offer saved values, though they may still override it, or new-password for a field that sets a password.
More on the rule
Section titled “More on the rule”axe-core’s documentation of the rule
CORA’s fix guidance adapts content from accessibility-agents, under the MIT License: see its notice.