Web Governance
All form submission error messages provide assistance in correcting the error
3.3.3 Error Suggestion
This document provides information about the related accessibility check:
All form submission error messages provide assistance in correcting the error.
Error messages displayed while users fill out forms should help users understand and correct the error as much as possible.
Good error messages are crucial in determining whether users on your website can successfully complete forms or not. Error messages that help understand and correct errors are necessary for some users to fill out the form correctly and are beneficial for all users.
Cognitive impairments: These users get a stronger foundation to fill out the form correctly.
Motion impairments: These users can minimize the need to retry when input errors are reduced.
Visual impairments; who can better understand error messages, which leads to more effective error correction.
Sophia Johnson is a 32-year-old woman who suffered a cognitive disability as a result of a brain injury caused by a fall from a ladder at her construction job five years ago:
The fall resulted in a severe head injury that required extensive medical intervention and rehabilitation. Despite her determined efforts to recover, Sophia still experiences cognitive difficulties as a result of the injury, including memory lapses, difficulty concentrating, and processing complex information.
"Dealing with error messages in forms has been incredibly challenging for me since my brain injury. Sometimes, the messages are so confusing that it feels like trying to solve a puzzle with missing pieces. Clear and straightforward error messages would make a world of difference, giving me the guidance and support I need to fix any mistakes and move forward".
This section gives some examples of the issue.
In a form where all fields are mandatory, the user attempts to submit the form, but forgets to fill in the email field. An error message is displayed, that reminds the user that the email field must be filled out. In this example the user gets help to understand how to correct the error.
In a form, the user mistakenly enters their name in the email field. The form displays an error message that shows the user an example of a valid email format, such as "[email protected]". In this example, the error message assists the user to understand and correct the mistake with an example of the correct email format.
In a form, the user mistakenly enters their name in the email field. The form displays an error message that says, “Invalid input”. In this example, the error message just tells the user there is an error but does not help them to understand or correct the error.
Click Accessibility (icon of a human with arms outstretched) on the menu bar. The Accessibility dashboard opens.
Select Checklist (insect icon) from the menu on the left side of the page.
Select the Level AA compliance level to filter for, above the checks list.
Find the check for “All form submission error messages provide assistance in correcting the error.” You can use Ctrl+F to assist with this.
Click the Pages button on the same row as a checklist item to view a list of the pages where this issue is found.
Click Inspect Page with browser extension (magnifying glass icon) on the same row as a page in the list to open the page and inspect it with the web browser extension.
In the browser extension, click on the magnifying glass once again to find the location of the form on the page.
Click Cancel to remove the yellow box.
Test the form.
Typical errors you can introduce on the form fields are:
Leave mandatory fields blank.
Enter something other than a valid email address in email fields, for example, "John Doe".
Populate date fields with an invalid date format, for example, write "Monday" instead of January 21st.
Fill out the form with invalid data.
If the error message is NOT helpful: Notify the website developers about the issue, as they are the ones most likely capable of resolving it. After you have completed the changes, mark the check as “Reviewed” from the Web Governance browser extension.
For full instructions, see the user guide article:
How to review an accessibility issue
This section contains useful resources for this subject.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
In the browser extension, click on the magnifying glass once again to find the location of the form on the page.
Click Cancel to remove the yellow box.
Test the form.
Typical errors you can introduce on the form fields are:
Leave mandatory fields blank.
Enter something other than a valid email address in email fields, for example, "John Doe".
Populate date fields with an invalid date format, for example, write "Monday" instead of January 21st.
Fill out the form with invalid data.
If the error message is NOT helpful: Notify the website developers about the issue, as they are the ones most likely capable of resolving it. After you have completed the changes, mark the check as “Reviewed” from the Web Governance browser extension.
For full instructions, see the user guide article:
How to review an accessibility issue
This section contains useful resources for this subject.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Web Governance