46 lines
2.8 KiB
Plaintext
46 lines
2.8 KiB
Plaintext
|
== 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 https://www.w3.org/TR/WCAG21/#input-purposes[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 https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete[guidelines] provided in the HTML standard.
|
||
|
|
|
||
|
|
=== Code examples
|
||
|
|
|
||
|
|
==== Noncompliant code example
|
||
|
|
|
||
|
|
[source,javascript,diff-id=1,diff-type=noncompliant]
|
||
|
|
----
|
||
|
|
function MyInput() {
|
||
|
|
return <input type="text" autocomplete="foo" />; // Noncompliant
|
||
|
|
}
|
||
|
|
----
|
||
|
|
|
||
|
|
==== Compliant solution
|
||
|
|
|
||
|
|
[source,javascript,diff-id=1,diff-type=compliant]
|
||
|
|
----
|
||
|
|
function MyInput() {
|
||
|
|
return <input type="text" autocomplete="name" />;
|
||
|
|
}
|
||
|
|
----
|
||
|
|
|
||
|
|
== Resources
|
||
|
|
=== Documentation
|
||
|
|
|
||
|
|
* WCAG - https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose[Identify Input Purpose]
|
||
|
|
* WCAG - https://www.w3.org/TR/WCAG21/#input-purposes[Input Purposes for User Interface Components]
|
||
|
|
* HTML Standard - https://html.spec.whatwg.org/multipage/forms.html#enabling-client-side-automatic-filling-of-form-controls[Enabling client-side automatic filling of form controls]
|
||
|
|
* HTML Standard - https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete[Autofilling form controls: the autocomplete attribute]
|