Autocomplete in a form

The HTML autocomplete attribute tells the browser what type of value is expected when filling out a form field. Browsers store what users have entered before. Browsers can then use those saved values to automatically complete fields.

Data such as names, addresses, and phone numbers can then be filled in automatically by the browser.

Autocomplete is helpful for users who have difficulty typing, have memory issues, struggle with language or just love the convenience of not typing the same data over and over again.

Use autocomplete when a value is defined

WCAG contains a complete list of values for autocomplete. Always use an autocomplete attribute if a value for a form field is defined in this list and the value to be added is information about the current user.

When using autocomplete, it is important that the label always remains visible. The user needs to know whether the correct value has been entered in the related field.

Tip: The autocomplete value for City is address-level2.

Code example

<input 
        id="firstname"
        name="firstname"
        type="text"
        autocomplete="given-name"
/>

Note: aria-autocomplete has a different purpose and usage than autocomplete on form fields. aria-autocomplete is used in web components, for example to indicate that suggestions are available for search results.

Pre-fill known information where possible

This doesn’t address ‘autocomplete’, but it is related: if the user is logged in, use known information to pre-fill fields. For example, if a session already contains information that could be used to pre-fill fields, such as a shipping address for an online order.

Resources

WCAG Success Criteria for pre-fill and autocomplete

• Using the correct autocomplete attribute is required to meet WCAG Success Criterion 1.3.5 Identify Input Purpose (Level AA).
• Pre-filling previously entered by or provided to the user is required (with some exceptions) to meet WCAG Success Criterion 3.3.7 Redundant Entry.

Autocomplete in WP Forms plugins

Gravity Forms information about autocomplete: Accessibility Checklist for Gravity Forms and Accessibility Guide for Developers.

Help wanted: We want to invite people familiar with form plugins to help us add instructions for WordPress form plugins, including options, settings, and screenshots. Please contact us if you want to help us with this additional content.

Other resources

• Jules Ernst from 200 OK created a Dutch interpretation of autocomplete of the autocomplete values list.
• NL Design System Guidelines for web forms (Dutch content).