Error focus handling for invalid form submissions is missing
| Field | Value |
|---|---|
| Rule code | Manual_FormField_ErrorFocus_Missing |
| WCAG conformance level | A |
| WCAG success criterion | 3.3.1 Error Identification |
| Must be fixed at source | No |
Description
When a user tries to submit a form with invalid data, form submission may be prevented and user focus should be handled to easily locate the remaining invalid fields.
How to fix
When the form is submitted with invalid data, form submission should be prevented and focus should be directed to the first invalid field within the form. Ensure that all invalid form fields have an error message near the input element. It should be just before or after the input and provide help for correcting the error. Associate the error message to the input so assistive tools can find and announce it. Use an id attribute on the message, and an aria-describedby attribute on the input. Use the same value for both attributes to connect them.
Also, set aria-invalid="true" on input elements that have an error. When the error is corrected, remove the aria-invalid attribute or set its value to false.
<label for="url">Website URL</label>
<input type="url" name="url" id="url" aria-describedby="url-error" aria-invalid="true">
<p id="url-error" class="error-msg">Error: Please include <code>http://</code> or <code>https://</code>.</p>