What does this mean?
An input appears like it would benefit from having an autocomplete attribute but one is not present.
Impact on users
The autocomplete attribute acts as a hint to the browser as to the meaning of the data being asked for. This is different from the type and inputmode which are related to the format of that data.
By using an autocomplete attribute we can assist the browser in offering to populate fields which it might already have the data for.
From a user's point-of-view if a browser can populate the data instead of them having to type it, it can save the user time and prevent potential errors in typing. This is especially helpful for users who might have difficulty with entering data into fields, including those with fine motor control issues, memory issues or those with dyslexia.
For example here we are asking for a month. The browser can see we are asking for a number but it does not know what it is for so cannot offer to populate it.
<label for="month">Month</label>
<input type="text" inputmode="numeric">
In the absence of an autocomplete` attribute, sometimes a browser might use heuristics (for example by reading the label of a field) to try and work out if it should offer to populate a field. This can go wrong and leave the user having to delete data, so it is always best to give the browser direction where appropriate.
How to fix
If the data is something which the user is likely to have entered before (perhaps even on a different website), especially if it is their own personal data, we should add an autocomplete attribute to help the browser help the user.
With the addition of an autocomplete set to bday-month you can indicate to a browser that this field is asking for the person's birthday month. If the browser has that data saved it can then offer to populate that data at the user's request.
<label for="month">Month</label>
<input type="text" inputmode="numeric" autocompete="bday-month">
There are a range of values which can be applied to the autocomplete attribute. The attribute can take multiple values to define a specific requirement.
For example a phone number can be defined as a plain phone number:
<label for="phone">Phone</label>
<input type="tel" id="phone" autocompete="tel">
But by adding a qualifying value we can be specific (note the order of values is important):
<label for="phone-work">Work phone</label>
<input type="tel" id="phone-work" autocompete="work tel">
References
- Autofilling form controls - HTML Spec
- The autocomplete attribute - GOV.UK
- WCAG Identify Input Purpose