A11y tips: autocomplete your form fields

The autocomplete attribute allows the user agent to automatically fill in certain form fields by obtaining the value from previous past values ​​entered by the user, or from pre-configured values. It can be very useful for users with a cognitive disability, as well as for any user does not have to be repeating the same information over and over again in different forms.

<label for="first-name">First Name</label>
<input
  id="first-name"
  name=”first-name”
  type="text"
  autocomplete="given-name"
/>
<label for="last-name">Last Name</label>
<input
  id="last-name"
  name=”last-name”
  type="text"
  autocomplete="family-name"
/>

The W3C and MDN pages provide a complete list of the values ​​that the autocomplete attribute can take. The more consistent the use of these values ​​is throughout the entire site, the easier it will be for the user agent to use them correctly and usefully for the user.

In order to provide autocompletion, user-agents might require form fields (<input>, <select> and <textarea>) elements to:

• Have a name and/or id attribute
• Be descendants of a <form> element
• The form to have a submit button

There are form fields that you should be careful with when using autocomplete attribute, as they contain sensitive information, such as those related to credit cards.

Some of the values ​​are based on US formats, so usage in other countries may be difficult to resolve for the user agent.