FeaturesPricingAudit GuideFree StatementDashboard →

Identify Input Purpose Clearly

Learn how to use autocomplete attributes to identify form field purpose. Helps browser fill forms automatically.

6 min read
moderate severityWCAG Level AAWCAG 2.1 Success Criterion 1.3.5Auto-detectable

What Is It?

Input purpose is identified using autocomplete attributes (name, email, tel, address, etc.). This tells browsers what kind of data goes in each field so it can auto-fill from saved data.

Affected users: Users with motor disabilities, users with cognitive disabilities, aging users, voice control users, all users (faster form filling)

Why It Matters

Users with motor disabilities benefit from auto-fill, reducing keystrokes. Users with cognitive disabilities understand field purpose better. Browsers can help users fill forms faster.

Good news: Automated tools can detect missing autocomplete attributes. Choosing correct values requires understanding form field purpose.

How to Detect This Issue

Test form with browser auto-fill. Check if fields auto-fill correctly. Inspect <input> for autocomplete attribute. Test with screen reader.

Automated detection: Run a free SiteArmor scan to automatically detect this issue across your entire website. Check your site →

Code Examples & Fixes

HTML / CSS

Before (inaccessible)
<input type="text" name="name"> <input type="text" name="email">
After (accessible)
<input type="text" name="name" autocomplete="name"> <input type="email" name="email" autocomplete="email">

Use appropriate autocomplete values: name, email, tel, street-address, postal-code, country, etc. Browsers save and auto-fill values.

React / Next.js

Before
<input type="text" placeholder="Full name" /> <input type="password" placeholder="Password" />
After
<input type="text" name="fullname" autoComplete="name" placeholder="Full name" /> <input type="password" name="password" autoComplete="current-password" placeholder="Password" />

React: use autoComplete prop (camelCase). autoComplete="current-password" for existing password, "new-password" for registration.

WordPress

Before
Contact form fields without autocomplete attributes
After
Form fields have proper name and autocomplete attributes: name="user-name" autocomplete="name", etc.

WordPress form plugins like WPForms support autocomplete. Enable in form builder settings.

Shopify Liquid

Before
Checkout form with generic input fields lacking autocomplete
After
Checkout form with full autocomplete support: email, name, phone, street-address, postal-code, country

Shopify automatically handles autocomplete in checkout. Verify custom checkout forms include autocomplete attributes.

Common Mistakes

✗

Not using autocomplete at all on form fields

✗

Using wrong autocomplete values (e.g., autocomplete="text")

✗

Setting autocomplete="off" unnecessarily (breaks user experience)

✗

Not distinguishing between new-password and current-password

✗

Missing name attributes (autocomplete relies on proper naming)

Frequently Asked Questions

What are common autocomplete values?
name, email, tel, url, street-address, address-line1, postal-code, country, cc-number, cc-name. See HTML spec for full list.
Should I use autocomplete="off"?
Generally no. It frustrates users. Only use for sensitive fields like medical info. Let browsers help users fill forms.
What about password fields?
Use autocomplete="current-password" for login, "new-password" for registration/password change. This helps browsers distinguish contexts.
Does autocomplete work on all browsers?
Yes. All modern browsers support autocomplete. Values are standardized (HTML spec). Focus on using correct values.

Check your website for free

Get your ADA, WCAG, privacy & security score in 90 seconds.

No credit card
WCAG 2.1
ADA
Privacy

Related guides