How to improve browser autocomplete suggestions without turning them off?

Question

There are ten gazillion threads on here re. how to disable browser autocomplete behavior, e.g. How do you disable browser Autocomplete on web form field / input tag?. I do not want to set autocomplete="off" for my form fields. As the MDN documentation for how to do that states:

It is important to know that if you turn off autocomplete, you are breaking [WCAG rule 1.3.5]

So as an alternative to disabling autocomplete, I want to understand whether as a developer I can help the browser make its suggestions for my form fields more relevant.

As it is, I can see why many developers (or their bosses/clients) do end up wanting to be rid of the feature entirely. For example, when I added an <input name="title"> to a completely unrelated website I was developing locally, my browser suddenly started offering me a random sampling of questions I'd asked/edited across several StackExchange sites over several years:

How can I help the browser improve the user experience here? What factors do browsers use when choosing what text to suggest?

• clearly the domain is not taken into consideration, unless my testing via localhost is triggering more promiscuous autocomplete than normal?
• apparently at least one browser considers the field's name attribute to have universal semantic meaning, since Chrome is suggesting content I typed into other sites which happened to also use name="title" within their forms.
• does any metadata on the form itself affect the suggestions? E.g. if I wrapped this input in a <form id="my-particular-form-has-nothing-to-do-with-qa-sites-btw"> might some browsers scope their autocomplete to only suggest previous name="title" entries into my-particular-form…?

Again, I am not looking for answers that tell me how to disable autocomplete or complaints that this is a duplicate of questions asking how to do that. I am happy to let the browser help the user fill in my form fields, but I want to help that help be more…helpful.

(Or, do I misunderstand the purpose of autocomplete to begin with? Is it only intended to be used for use cases like login credentials, shipping addresses, credit card number, etc. and I should be using autocomplete="off" for everything else?)

Answer 1

Current Auto Complete Behaviour is a mess!

Browser use various methods to determine if a field should be auto-complete.

For example the typical username, password combo a browser will look for two fields, one of which is type email and the other type password.

They also look at the name attribute as well as the type attribute to further try and determine whether a field should be auto-completed.

Finally depending on the browser they also look for fields that they expect to see together and use associated labels to work out what fields are which (which is why it is important to properly link labels with form fields!).

A prime example of this would be credit cards where they would expect to see cardholder name, credit card number, expiry etc.

Without at least 2 of these items auto-complete won't work (yet again depends on which browser you use).

Because each browser has a unique way of implementing this feature it is sometimes difficult to prevent 'cross site contamination' of results.

Domain is not a consideration as you already suspected.

However there are a couple of things you can do:-

The 'old' way (current way)

Give the input an unusual name attribute (i.e. name="xA123IIasd") .

As this is one of the primary factors in determining what a field is for (as far as a browser is concerned) and does not interfere with the user experience in any way it is a great option.

It won't work on username and password fields though as browsers have optimised for that. It also doesn't guarantee success but it will improve 'cross site contamination' for most fields.

You may also want to try giving the field a slightly different label than standard, as long as it doesn't impact usability (i.e. "Your First Name" instead of "First Name").

The new (better) way [not fully supported]

Use the new autocomplete options, part of the latest 'living standard'.

Support is unclear (i.e. can't find these on caniuse.com, only 'off') but I know it works in Google Chrome and Opera, kinda works in Safari (some items supported, some not), it is better than nothing!

Here is a list of the full 53 options you can use.

By adding these to your inputs you can control what the browser will expose as options for autocomplete.

For every other browser, choice is yours, browser sniff and switch autocomplete off or just leave it as it is 'expected behaviour' (even if it is not a great experience).

One more interesting feature

One final feature that the new autocomplete has is 'sections'.

This allows you to 'scope' the auto complete to a particular set of fields.

For example:-

<fieldset>
    <legend>Package One Ship To</legend>
    <label> Address:     <textarea name="pack1Add1" autocomplete="section-packageone shipping street-address"></textarea> </label>
    <label> City:        <input name="pack1Add2" autocomplete="section-packageone shipping address-level2"> </label>
    <label> Post Code: <input name="pack1Postcode" autocomplete="section-packageone shipping postal-code"> </label>
</fieldset>
<fieldset>
    <legend>Package Two Ship To:</legend>
    <label> Address:     <textarea name="pack2Add1" autocomplete="section-packagetwo shipping street-address"></textarea> </label>
    <label> City:        <input name="pack2Add2" autocomplete="section-packagetwo shipping address-level2"> </label>
    <label> Postal Code: <input name="pack2Postcode" autocomplete="section-packagetwo shipping postal-code"> </label>
</fieldset>

This means you can use auto complete twice on one page as each group is treated seperately from the other groups!

You will also note I use 'shipping' within the auto-complete to dictate to use the shipping address, the other option here is 'billing' (those are the only two options for address types at time of writing).