What does this accessibility issue mean?
Accessibility issue summary: Form autocomplete attribute is incorrect
On website forms, autocomplete attributes can make a form easier and faster to complete for users. It prompts the browser to auto-fill form fields with values the user has entered before.
When the autocomplete attribute is incorrectly set or missing, users may face challenges in efficiently completing and submitting forms, as the browser may not be able to assist with autofill features or provide accurate suggestions based on the user’s input history. This can be particularly problematic for users with cognitive or motor disabilities who rely on these features for a smoother and more efficient browsing experience.
To comply with accessibility and WCAG best practices, make sure your form autocomplete attributes are correctly set up.
Example HTML violation: Incorrect autocomplete attribute (WCAG Level AA Issue)
<form action="/submit" method="POST">
<label for="full-name">Full Name:</label>
<input id="full-name" autocomplete="full-nam" name="full-name" type="text" />
<input type="submit" value="Submit" />
</form>The above HTML violates the autocomplete-valid accessibility rule because the autocomplete attribute of the input element has the incorrect value "full-nam" instead of the correct value "name". This violates the rule because the autocomplete attribute is used to provide suggestions or autofill options to users when filling out forms.
By using the incorrect value, the browser may not be able to provide accurate suggestions or autofill options for the input field, which can hinder the user experience and make form filling more difficult.
It is important to use the correct values for the autocomplete attribute to ensure that users can efficiently fill out forms, especially on mobile devices where predictive text can greatly enhance the user experience.
How to fix "Incorrect autocomplete attribute (WCAG Level AA Issue)" issue
<form action="/submit" method="POST">
<label for="full-name">Full Name:</label>
<input id="full-name" autocomplete="name" name="full-name" type="text" />
<input type="submit" value="Submit" />
</form> The above HTML example corrects the issue by replacing the incorrect autocomplete value "full-nam" with the correct value, "name".
For more information about the autocomplete attribute, you may want to read:
For resources on form accessibility, check:
This will ensure your forms are accessible and user-friendly.
