Add Autocomplete to Form Fields

Have you ever started filling out a form that asks for your name and address, only to have the browser suggest the information to you so that you could quickly select the information rather than having to type it all out?

Automatically filling personal information into a form with just one or two clicks is more than just a convenience; it’s an accessibility feature too. One that is made possible by the HTML autocomplete attribute.

The HTML Autocomplete Attribute

The HTML autocomplete attribute can be added to input fields so that browsers and assistive technologies can understand the purpose of the field and help users fill out the information faster.

Here’s an example showing how the autocomplete attribute can be added to an input:

<label for="input_5_2">Student:</label>
<input name="input_2" id="input_5_2" type="text" value="" autocomplete="name">
<label for="input_5_3">Email address:</label>
<input name="input_2" id="input_5_3" type="text" value="" autocomplete="email">

In this code example, there is an autocomplete attribute clarifying that the first field, “Student,” is expecting a name, and the second field has an autocomplete attribute specifying that it’s an email address field.

If you were to start filling this form out, your browser would suggest your name and email address be pre-filled in on the form.

There are 53 recognized values for the autocomplete attribute that can make it easier for users to fill out forms on websites.

How Autocomplete Improves Accessibility

When you enable autocomplete on form fields, it’s more than just added convenience. Identifying the purpose of the input in a way that is programmatically understood by browsers and assistive technologies means that they can present the field to users in different ways to help them provide the requested information.

In some cases, the technology might clarify the expected information by adding icons to represent the expected information or suggest autofill options to users based on their past input. This helps all users to understand better how to complete the field.

For users with limited mobility, especially those using eye tracking or sip-and-puff devices, typing on a computer can be very time-consuming. Being able to select and have their address automatically filled in (or any other piece of information) will make it much easier to fill out forms.

WCAG requires Autocomplete

There is a Web Content Accessibility Guidelines (WCAG) Success Criterion, 1.3.5 Identify Input Purpose (Level AA), that focuses on making it easier for users with disabilities to know what is expected of them when filling out fields.

Visible labels and instructions can help users understand the purpose of form input fields, but 1.3.5 Identify Input Purpose also requires that the expected data on the form field be programmatically available. Using the autocomplete attribute is one major way to make the input programmatically available.

If the website you build needs to meet WCAG 2.1 AA, you need to have the autocomplete attribute on relevant form fields.

When to Use the Autocomplete Attribute

The purpose of the autocomplete attribute on form fields is to assist users in filling out their information – not information about other people.

You should only add the autocomplete attribute to fields that ask users about their own information (name, address, phone, date of birth, credit card information, etc.), but should not add it to fields asking about other people.

For example, on the WordPress Accessibility Day speaker application, we have a name field for the person filling out the form and name fields for any co-presenters. The autocomplete attribute is only present on the name field for the person submitting the form but not on the name fields for co-presenters.

Autocomplete on WordPress Forms

If you’re selecting a form plugin for your WordPress site, ensure it supports adding or defining autocomplete attributes. If it adds them automatically to fields, then there should be an easy way to stop that autocomplete from outputting if you’re asking for information about someone other than the user filling in the form.

Here’s a look at how some popular WordPress Form plugins support (or fail to support) autocomplete:

• Contact Form 7: you can add it directly into the HTML in the form editor.
• Formidable Forms: the single-line text field allows you to select an autocomplete attribute; however, other key fields, such as the name and email field, do not appear to support it.
• Gravity Forms: enable autocomplete in the Advanced field settings.
• Ninja Forms: autocomplete is defined on relevant form fields by default, but there is an option to disable it as needed.
• WPForms: it doesn’t appear that WPForms supports autocomplete either by defining it by default or providing a field for you to set it.
• WS Form: look for a field to define the autocomplete attribute on the Basic tab.

Of all the form plugins reviewed, WPForms was the only one to completely miss the mark on autocomplete. This may be a good reason to explore a different form plugin if you want the forms you build to be accessible.

If you’re using one of the other plugins, take a moment to check your forms. Do you need to enable autocomplete on fields? If so, do it now. This little tweak will make submitting forms faster and easier for your users, which means better accessibility and the possibility of more conversions with fewer abandonments.

Additional Resources

• WCAG 2.1 Technique H98: Using HTML 5.2 autocomplete attributes
• MDN docs: HTML attribute: autocomplete