Summary

Setting the HTML autocomplete attribute on form fields simplifies the comprehension and completion of these fields for users with cognitive and physical disabilities.

Techniques

Examples

Example 1 — Autocomplete for a telephone number

The following example shows three fields for inputting a telephone number: one for the area code and one each for the local number. The purpose of each field is identifiable from its autocomplete attribute.

<fieldset
   <label>Telephone:</label>
   (<input type="text" autocomplete="tel-area-code" id="area-code" aria-label="Area code"/>)
   <input type="text" autocomplete="tel-local-prefix" id="local-prefix" aria-label="Local number prefix"/> -
   <input type="text" autocomplete="tel-local-suffix" id="local-suffix" aria-label="Local number suffix"/>
</fieldset>
Example 2 — Autocomplete for birth date
<fieldset
   <label>Birth Date:</label>
   <select autocomplete="bday-year" id="birth-year" aria-label="Year">
   	…
   </select>
   <select autocomplete="bday-month" id="birth-month" aria-label="Month">
   	…
   </select>
   <select autocomplete="bday-day" id="birth-day" aria-label="Day">
   	…
   </select>
</fieldset>

Frequently Asked Questions

Why isn't the input label sufficient?

Input labels for the same information differ site-to-site and language-to-language making them unreliable for machine processing. The controlled keywords for the autocomplete allow user agents and assistive technologies to determine the purpose without having to parse language and spelling peculiarities.

Explanation

Although not as common in reading systems as in web browsers, saving personal information allows user agent to automatically fill it in the next time the user encounters the same field. A publication may ask for this type of information in the context of an educational program or to sign up to receive updates from the publisher.

To provide this functionality, the user agent needs to understand the information the user inputs as well as when it is relevant to use again. The autocomplete attribute is the key to this machine understanding. It allows authors to assign a precise machine-readable semantic to form fields so that the user agent understands where what information goes in what field.

The HTML definition of the attribute includes the list of semantics that are available. The semantics cover such information as names, addresses, birth dates, and telephone numbers. The WCAG documentation also provides a condensed list of the values.

Using the autocomplete attribute makes forms simpler to complete for users with cognitive and physical disabilities as they do not have to re-enter the same information again and again each time they are asked for personal information.

Using these semantics also allows user agents to augment comprehension in other ways. For example, they could add a standard visual cue (an icon such as a telephone or birthday cake) to further help users understand each field's purpose.

Related Links