Perceivable · 1.3 Adaptable
Fields that collect information about the user, such as name, email, phone or address, must have their purpose identified in code where the technology supports it, which in HTML means the matching autocomplete value.
Live demo
The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.
Press Autofill like a browser in each version. Check which fields get filled and whether the right details land in them.
The tools follow the version you last used.
What happened
Why it passes
Each field states its purpose with a valid autocomplete value, so the browser fills in the person's name, email, phone and address correctly in one step.
Why it fails
Most fields have no autocomplete value, one uses a made-up value and one names the wrong detail. The person has to type almost everything, and their last name lands in the First name box.
Examples
Four examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.
+ autocomplete="…" ×2
Fails
Live preview
<label for="email">Email</label><input id="email" name="email" type="email"><label for="phone">Mobile number</label><input id="phone" name="phone" type="tel">Nothing in the code says these fields ask for the user's own email and phone number, so browsers and assistive tools cannot reliably fill them in or mark them with familiar icons.
Passes
Live preview
<label for="email">Email</label><input id="email" name="email" type="email" autocomplete="email"><label for="phone">Mobile number</label><input id="phone" name="phone" type="tel" autocomplete="tel">email and tel are values from the WCAG list of input purposes, so each field's purpose is machine-readable and the browser can fill it in (technique H98).
Fails
Live preview
<label for="first">First name</label><input id="first" name="first" autocomplete="family-name"><label for="mail">Email</label><input id="mail" name="mail" type="email" autocomplete="useremail">family-name says this field wants a surname, so autofill puts the wrong name in it, and useremail is not a valid value, so it does not identify the field at all.
Passes
Live preview
<label for="addr">Street address</label><input id="addr" name="addr" autocomplete="shipping address-line1"><label for="zip">ZIP code</label><input id="zip" name="zip" autocomplete="shipping postal-code"><label for="country">Country</label><input id="country" name="country" autocomplete="shipping country-name">The shipping hint followed by a field name identifies each part of the user's own delivery address, so it can be filled from their saved details.
Why it matters
People with cognitive, memory or motor disabilities can have the browser fill in their details and can use tools that add familiar icons to fields, reducing typing and errors.
W3C: Understanding 1.3.5Level AA
Level AA is the level most laws and policies require.
Where it is required
Required where the law names WCAG 2.1 or later at this level: the United States, Canada, the European Union, the United Kingdom, France, Germany, Italy, Spain, the Netherlands, Ireland, Norway, Switzerland, India, Australia and New Zealand.
How to test
A few concrete steps. Automated tools find some failures; most need a person.
Common failures