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.
Ensure the autocomplete attribute is correct and suitable for the form field it is used with:
<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". autocomplete="name" would suggest that the browser autofill the user’s full name. 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.
function MyInput() {
return <input type="text" autocomplete="foo" />; // Noncompliant
}
function MyInput() {
return <input type="text" autocomplete="name" />;
}