Learn how to use the autocomplete attribute correctly to improve form usability and meet accessibility standards.
What it is
The autocomplete attribute on HTML input elements tells browsers and assistive technologies what kind of information is expected. It allows the browser to offer autofill suggestions based on previously entered data. The value must be a specific token from the WHATWG standard, such as name, email, or tel. Using incorrect or generic values like on or off (unless explicitly disabling) breaks this functionality.
Why it matters
- Accessibility: Screen readers rely on these tokens to announce field purposes clearly, helping users with cognitive disabilities understand what to enter.
- User Efficiency: Correct tokens enable browsers to accurately fill forms, reducing typing effort and errors for all users.
- WCAG Compliance: WCAG 2.1 Success Criterion 1.3.5 (Identify Input Purpose) requires that the purpose of each input collecting user information can be programmatically determined.
- Data Integrity: Proper autocomplete reduces typos in critical fields like email addresses or phone numbers.
Syntax or steps
Add the autocomplete attribute directly to the <input> element. Use one of the standardized tokens listed in the HTML specification. For example, use autocomplete="given-name" for first names and autocomplete="family-name" for last names. Avoid using autocomplete="off" unless you have a specific security reason, as it often degrades user experience.
Example
<form action="/submit" method="post">
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname" autocomplete="given-name">
<label for="lname">Last Name:</label>
<input type="text" id="lname" name="lname" autocomplete="family-name">
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="email">
<button type="submit">Submit</button>
</form>In this example, given-name and family-name are distinct tokens that help browsers separate first and last names during autofill. The email token ensures the browser recognizes the field as an email address, potentially offering different validation or suggestion logic.
Common mistakes
- Using "on" or "off": These are not valid semantic tokens for identifying purpose. They only toggle the feature but do not help screen readers identify the field's intent.
- Mismatched types and tokens: Using
type="text"withautocomplete="email"is technically allowed but confusing. Prefer matching the input type to the autocomplete token where possible. - Ignoring compound fields: For full names, use
autocomplete="name"instead of splitting into given/family if the UI expects a single string. - Missing labels: Autocomplete works best when paired with proper
<label>elements linked viaforandid.
When to use it
| Scenario | Recommended Approach |
|---|---|
| Standard User Data | Use specific tokens like username, password, address-line1. |
| Security-Sensitive Fields | Consider autocomplete="off" for one-time codes or highly sensitive data, but weigh against UX impact. |
| Custom/Non-Standard Data | If no standard token fits, use autocomplete="off" or omit the attribute, but document why. |
Practice
Guided Exercise: Create a shipping address form with fields for street address, city, postal code, and country. Assign the correct autocomplete tokens: street-address, address-level2, postal-code, and country-name.
Challenge: Modify your previous exercise to include a credit card number field. What is the correct autocomplete token? (Hint: Look for tokens related to payment methods.)
Quick check
Question: Why is autocomplete="on" insufficient for meeting WCAG 1.3.5?
Answer: Because "on" does not describe the *purpose* of the input. Assistive technologies need specific tokens like "email" or "tel" to programmatically determine what information is being collected.
Summary
The autocomplete attribute is a critical tool for both usability and accessibility. By using precise, standardized tokens, you ensure that browsers can effectively autofill forms and screen readers can accurately convey field purposes to users.