Check the autocomplete attribute on your signup form: a one-minute test

A signup form that blocks autofill makes people retype their name, email and address every time. For some users that is annoying. For others it is a real barrier. It takes a minute to check.

The check

View the page source and look at each <input> that collects personal data.

<input type="email" name="email" id="email" autocomplete="email">
<input type="text" name="fname" id="fname" autocomplete="given-name">

Look for two things: a missing autocomplete, and autocomplete="off" on fields like name and email.

What the standards say

The W3C's Understanding page for WCAG 1.3.5, Identify Input Purpose, says the purpose of a form input collecting information about the user must be programmatically determinable. It explains the reason: declaring the kind of data expected makes forms easier to fill out, especially for people with certain cognitive disabilities, who may not understand an input's purpose from its label alone.

MDN describes autocomplete as a hint to the browser on how, or whether, to prefill a control. It takes on, off, or space-separated tokens that describe the meaning of the value, such as email. MDN also notes that in most modern browsers, autocomplete="off" will not prevent a password manager from offering to save or fill login details, so turning it off may not do what you expected.

• MDN, autocomplete: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete
• W3C, Understanding 1.3.5: https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose

Quick test

1. Search the source for <input and list each field that asks about the user (name, email, phone, address).
2. Give each one a token that matches its meaning instead of leaving it blank.
3. Remove autocomplete="off" from those fields unless you have a specific reason.
4. In a browser with saved details, open the form and see whether it offers the right values in the right fields.

The WCAG criterion covers fields collecting information about the user. A field for something else, like a coupon code, doesn't need a purpose token.

Which fields on your signup form would the browser fill correctly today?

Comments

[Arjun Sharma]

Small tests like this are the best kind of accessibility work. They take a minute and they catch the things users notice first.