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?<\/p>\n\n\n\n
Automatically filling personal information into a form with just one or two clicks is more than just a convenience; it\u2019s an accessibility feature too. One that is made possible by the HTML autocomplete attribute.<\/p>\n\n\n\n
The HTML autocomplete attribute<\/a> 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.<\/p>\n\n\n\n Here\u2019s an example showing how the autocomplete attribute can be added to an input:<\/p>\n\n\n\n In this code example, there is an autocomplete attribute clarifying that the first field, \u201cStudent,\u201d is expecting a name, and the second field has an autocomplete attribute specifying that it\u2019s an email address field.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n There are 53 recognized values for the autocomplete attribute<\/a> that can make it easier for users to fill out forms on websites.<\/p>\n\n\n\n When you enable autocomplete on form fields, it\u2019s 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n There is a Web Content Accessibility Guidelines (WCAG) Success Criterion, 1.3.5 Identify Input Purpose (Level AA)<\/a>, that focuses on making it easier for users with disabilities to know what is expected of them when filling out fields.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n If the website you build needs to meet WCAG 2.1 AA, you need to have the autocomplete attribute on relevant form fields.<\/p>\n\n\n\n The purpose of the autocomplete attribute on form fields is to assist users in filling out their information – not information about other people.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n If you\u2019re 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\u2019re asking for information about someone other than the user filling in the form.<\/p>\n\n\n\n Here\u2019s a look at how some popular WordPress Form plugins support (or fail to support) autocomplete:<\/p>\n\n\n\n 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.<\/p>\n\n\n\n If you\u2019re 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.<\/p>\n\n\n\n<label for=\"input_5_2\">Student:<\/label>\n<input name=\"input_2\" id=\"input_5_2\" type=\"text\" value=\"\" autocomplete=\"name\">\n<label for=\"input_5_3\">Email address:<\/label>\n<input name=\"input_2\" id=\"input_5_3\" type=\"text\" value=\"\" autocomplete=\"email\"><\/code><\/pre>\n\n\n\nHow Autocomplete Improves Accessibility<\/strong><\/h2>\n\n\n\n
WCAG requires Autocomplete<\/strong><\/h2>\n\n\n\n
When to Use the Autocomplete Attribute<\/strong><\/h2>\n\n\n\n
Autocomplete on WordPress Forms<\/strong><\/h2>\n\n\n\n
\n
Additional Resources<\/strong><\/h2>\n\n\n\n
\n