
org.sonar.l10n.web.rules.Web.S6840.html Maven / Gradle / Ivy
Why is this an issue?
Not providing autocomplete values in form fields can lead to content inaccessibility. The function of each standard input field, which gathers a
person’s personal data, is systematically determined according to the list of 53 Input Purposes
for User Interface Components. If the necessary autocomplete attribute values are absent, screen readers will not be able to identify and read
these fields. This lack of information can hinder users, particularly those using screen readers, from properly navigating and interacting with
forms.
For screen readers to operate effectively, it is imperative that the autocomplete attribute values are not only valid but also correctly
applied.
How to fix it
Ensure the autocomplete attribute is correct and suitable for the form field it is used with:
- Identify the input type: The autocomplete attribute should be used with form elements like
<input>
,
<select>
, and <textarea>
. The type of input field should be clearly identified using the type
attribute, such as type="text"
, type="email"
, or type="tel"
.
- Specify the autocomplete value: The value of the autocomplete attribute should be a string that specifies what kind of input the browser should
autofill. For example,
autocomplete="name"
would suggest that the browser autofill the user’s full name.
- Use appropriate autocomplete values: The value you use should be appropriate for the type of input. For example, for a credit card field, you
might use
autocomplete="cc-number"
. For a country field in an address form, you might use autocomplete="country"
.
For additional details, please refer to the guidelines provided in the HTML standard.
Code examples
Noncompliant code example
<input type="text" autocomplete="foo" />
Compliant solution
<input type="text" autocomplete="name" />
Resources
Documentation
- WCAG - Identify Input Purpose
- WCAG - Input Purposes for User Interface Components
- HTML Standard - Enabling
client-side automatic filling of form controls
- HTML Standard - Autofilling form
controls: the autocomplete attribute