Autocomplete / Autofill

The autocomplete attribute allows the purpose of certain input fields to be programmatically determined. User agents and assistive technologies can make use of this programmatic information in a variety of ways, most commonly to autofill forms with a user’s information.

Benefits

Makes filling out forms easier for everyone.

Less physical effort (particularly helpful for users with motor impairments)
Less need to remember long addresses or strings of numbers (helpful for users with language and memory related disabilities)
Fewer mistakes are made
Faster for all users to complete forms (Google estimates up to 30% faster)
Users with cognitive impairments may benefit from using images for communication (e.g. by assistive technology adding icons to fields)

The semantic purpose of the input can be used by user agents and assistive technology.

E.g. assistive technology for users with cognitive impairments may display icons next to input fields (a birthday cake next to a field with autocomplete="bday", a telephone next to a field with autocomplete="tel")

Autocomplete is independent of language.

Users not familiar with the text used in the label can still have the purpose of the field consistently identified to them and appropriately completed.

What does autocomplete identify?

The autocomplete attribute identifies the purpose of an input. It allows the browser to predict the most likely value of the form element, based on earlier values.

In contrast, the type attribute identifies broad categories. type describes the kind of input, but not necessarily the purpose of the input.

E.g.

<input type="email"> could be a field for the user’s email, or someone else’s email.

<input type="email" autocomplete="email"> semantically indicates the field is for the user’s email.

How to use autocomplete

Indicate the purpose of an input using the autocomplete attribute with one of the values listed under Input Purposes for User Interface Components in WCAG 2.1.

The autocomplete attribute should be used for all relevant fields that collect information about the user. They should not be used on fields collecting information about a third party.

For example: on a form collecting information about you and your insurance company, the fields about you would have autocomplete attributes, but the fields about the insurance company would not have autocomplete attributes.

Autocomplete Example

<h2>Your work contact info</h2>
    <label for="user-org">Company name</label>
    <input type="text" id="user-org" autocomplete="organization">

    <label for="user-title">Job title</label>
    <input type="text" id="user-title" autocomplete="organization-title">

    <label for="user-fullname">Full name</label>
    <input type="text" id="user-fullname" autocomplete="name">

<h2>Your insurance company contact info</h2>
    <label for="ins-org">Company name</label>
    <input type="text" id="ins-org">

    <label for="ins-contact-fullname">Contact name</label>
    <input type="text" id="contact-fullname">

    <label for="ins-contact-title">Contact's title</label>
    <input type="text" id="ins-contact-title">

See the list of input purposes and the matching values that should be applied to the autocomplete attribute:
WCAG 2.1 Input Purposes for User Interface Components

Note: WCAG uses the autocomplete attribute and autofill detail tokens as the best option (as of 2019) to programmatically convey an input’s purpose. There are more autofill detail tokens than are listed in the Input Purposes for User Interface Components section in WCAG 2.1. Use of these is encouraged, as it may make completing forms easier for all users. However, only the values listed in WCAG must be used to meet WCAG 1.3.5 Identify Input Purpose.

What about security/privacy?

Public/shared computers (e.g. in a library) are generally configured to not store autocomplete values.

On the topic of Security considerations, WCAG Technique H98: Using HTML 5.2 autocomplete attributes says:

Organizations can be concerned about allowing input fields to be automatically filled-in. There is sometimes confusion about how browsers save information and the security implications.
For the autocomplete attribute:
This technique should only be used when asking for data about the user who is filling the form in, not for other people.
It only works if you are on the same computer, using the same user-account, and using the same browser. Any multi-login scenario does not save autocomplete data between different accounts. (Users can setup syncing of data across computers, but that is not the default.)
Saving information with autocomplete is opt-in by the user, usually at the point of saving data the first time.
The form is not auto-submitted, the user can see the data before it is submitted.
It is easy to wipe both history and form data in the browser settings.
It is easy to engage a privacy mode, such as private browsing.
Even without autocomplete set in the webpage, browsers can save data, and some plugins (such as password managers) will aggressively use heuristics to guess what fields are for and fill them in. Using the autocomplete attribute makes those guesses accurate.
The browser history provides far more detail about what people have done, and is just as available as autocomplete data. The solutions/mitigations for browser-history are similar to autocomplete.

Related WCAG Criteria

WCAG 2.1 -- 1.3.5 Identify Input Purpose