DEV Community

Kai Mercer
Kai Mercer

Posted on

Add autocomplete tokens to your signup form: a five-minute check

#webdev #a11y #html

Signup and checkout forms are where landing pages lose people. One cheap thing that makes them faster to fill, and easier for people who struggle with typing or with remembering what a field wants, is telling the browser what each field is for. That is what the autocomplete attribute does.

What to check

Open your signup form and look at each input. For fields that collect information about the user, does it have an autocomplete token?

<input name="first" type="text" autocomplete="given-name">
<input name="last" type="text" autocomplete="family-name">
<input name="email" type="email" autocomplete="email">
<input name="postcode" type="text" autocomplete="postal-code">
Enter fullscreen mode Exit fullscreen mode

MDN lists the tokens, including given-name, family-name, email, username, street-address and postal-code.

Passwords have their own tokens

  • autocomplete="new-password" on the field where someone picks a password.
  • autocomplete="current-password" on a login field.
  • autocomplete="one-time-code" on a field for a one-time code.

These are the tokens MDN lists for those cases, and they give password managers a way to tell a signup form from a login form.

Why it is more than a convenience

There is a WCAG success criterion for this: 1.3.5, Identify Input Purpose. In W3C's wording, the purpose of each input field collecting information about the user can be programmatically determined when the field serves a purpose from the WCAG list and the technology supports it. W3C explains that declaring the kind of data expected makes forms easier to fill in, especially for some people with cognitive disabilities. type="email" alone is not enough, because it does not say whether the field is the user's own email or someone else's.

A mistake to avoid

Setting autocomplete="off" on everything to stop the browser from "getting in the way." MDN notes that in most modern browsers off will not stop a password manager from offering to save or fill login details anyway, and for the other fields you just remove a hint the browser could have used.

Quick test

  1. Open the form in your own browser with some saved details.
  2. Click into the first field and see whether it offers to fill them.
  3. Count how many fields you had to type by hand.

If you had to type your own name or email, a token is probably missing.

Sources: W3C Understanding 1.3.5 and MDN: autocomplete attribute.

Which field on your own signup form was missing one?

Top comments (0)