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 th
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
- Search the source for
<inputand list each field that asks about the user (name, email, phone, address). - Give each one a token that matches its meaning instead of leaving it blank.
- Remove
autocomplete="off"from those fields unless you have a specific reason. - 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?
Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.