This document gives information about the related Monsido checks:
All form submission error messages provide assistance in correcting the error.
What
Error messages displayed while users fill out forms should help users understand and correct the error as much as possible.
Why
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.
This check affects the following users who have:
Cognitive impairments; who get a stronger foundation to fill out the form correctly.
Motion impairments; who can minimize the need to retry by reducing input errors.
Visual impairments; who can better understand error messages, which leads to more effective error correction.
User story
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".
Examples
This section gives some examples of the issue.
Example 1
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.
Example 2
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 "name@email.com". In this example, the error message assists the user to understand and correct the mistake with an example of the correct email format.
Example 3
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.
How
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 Monsido 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.
Tip: Fill in the form intentionally incorrectly, so you can review if error messages help the user understand and correct the mistakes. 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.
After you have filled out the form with invalid data, attempt to submit it. Check for any error messages. If you encounter any, make sure that they can help the user identify and fix the error.
If the error message is helpful: Mark the check as “Reviewed” from the Monsido browser extension.
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 Monsido browser extension.
Note: It is not required for the error messages to reveal any information that can compromise website security.
Who in your team can typically fix this ?
UX Design; to decide what are helpful error messages.
Front end development; to implement changes in the webpage code.
Additional Resources
This section contains useful resources for this subject.
WCAG success criteria