--- title: "All form submission error messages provide assistance in correcting the error" date: "2024-08-19T08:00:49+00:00" summary: "Improve form usability with clear error messages that guide users in correcting mistakes and completing submissions successfully." image: type: "page" url: "/web-governance/all-form-submission-error-messages-provide-assistance-correcting-error" id: "97047fd8-22e7-4d48-92dc-8329086a8093" --- **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. 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**: 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. ### User story ![A woman with long dark hair sits on a red chair, looking down thoughtfully.](https://acquia.widen.net/content/3def2d12-b002-4e4b-bccc-9fe19fc3dfa2/web/Mon_AccessibilityHelpCenter-UserStory-WomainInChairLookingDown.png) 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. ![A form on a web page is prompting the visitor to sign up for a newsletter. There are three fields in the form: First name, Last name and Email. All fields are mandatory. The visitor didn't fill in the Email field and attempts to submit the form. An error message "You must fill in an email address in order to submit this form" shows below the Email field.](https://acquia.widen.net/content/c89e5216-1663-43d7-ad8e-fd8866025bf1/web/Mon_AccessibilityHelpCenter-example_web_form_good_feedback.png) #### 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](mailto: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. ![A form on a web page is prompting the visitor to sign up for a newsletter. There are three fields in the form: First name, Last name and Email. All fields are mandatory. The visitor has inputted their full name in the Email field and attempts to submit the form. An error message "Please enter a valid email address in the format 'name@email.com'"shows below the Email field](https://acquia.widen.net/content/0691dd35-833d-47b0-aa2c-34577b73094d/web/Mon_AccessibilityHelpCenter-example_web_form_good_feedback_with_example.png) #### 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. ![A form on a web page is prompting the visitor to sign up for a newsletter. There are three fields in the form: First name, Last name and Email. All fields are mandatory. The visitor has inputted their full name in the Email field and attempts to submit the form. An error message "Invalid input" shows below the Email field.](https://acquia.widen.net/content/1e0c22f4-9f94-436d-bcef-3fdd4ade26d1/web/Mon_AccessibilityHelpCenter-example_web_form_incorrect_feedback.png) How --- 1. Click **Accessibility** (icon of a human with arms outstretched) on the menu bar. The _Accessibility_ dashboard opens. ![The location of the Accessibility button on the domain toolbar.](https://acquia.widen.net/content/79462b58-cd9b-4a6a-a404-8a111c48805e/web/Mon_Opt_Dashboard-Accessibility.png) 2. Select **Checklist** (insect icon) from the menu on the left side of the page. ![The location of the Checklist option on the left menu on the Accessibility Checklist page.](https://acquia.widen.net/content/b5adcfdf-9dba-48ec-9655-21704d8c762b/web/Mon_Opt_Accessibility-LeftMenu-Checklist.png) 3. Select the **Level AA** compliance level to filter for, above the checks list. ![The location of the AA compliance level filter above the list table.](https://acquia.widen.net/content/099fd559-dbd5-4d8c-8a14-b47e867ac0de/web/Mon_Opt_Accessibility-WCAG-ComplianceLevel.png) 4. Find the check for “All form submission error messages provide assistance in correcting the error.” You can use Ctrl+F to assist with this. ![Location of "All form submission error messages provide assistance in correcting the error" check on the check list.](https://acquia.widen.net/content/6788ff70-1b50-481e-ba23-21c278ea7984/web/Mon_Accessibility_All%20form_submission_error_messages.png) 5. Click the **Pages** button on the same row as a checklist item to view a list of the pages where this issue is found. ![The location of the Pages link, on the far right side of a row in the checklist.](https://acquia.widen.net/content/fcf4aea6-35dc-42e4-9e3a-316765d3d6e5/web/Mon_Accessibility_All%20form_submission_error_messages_num_pages.png) 6. 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 Governance web browser extension. ![The location of the Inspect Page with Web Browser Extension button on the far right side of a row in the Pages with Errors list](https://acquia.widen.net/content/9a884c6f-105d-44cb-af38-60480b4ccdd3/web/Mon_Accessibility_All_form_submission_error_messages_inspect_page.png) 7. In the browser extension, click on the magnifying glass once again to find the location of the form on the page. ![Location of the "Highlight" button below an error in the browser extension.](https://acquia.widen.net/content/7a92f31a-d78b-4697-b24d-a7a30d0f891b/web/Mon_Accessibility_All_form_submission_error_messages_location_of_form_on_page.png) 8. Click **Cancel** to remove the yellow box. ![Location of a flagged error on the page, surrounded by a yellow box.](https://acquia.widen.net/content/79d93072-42c6-4985-8c89-4b6d05b80736/web/Mon_Accessibility_All_form_submission_error_messages_location_of_form_on_page_click_cancel.png) 9. 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`. ![Location of a flagged error on the page, surrounded by a yellow box.](https://acquia.widen.net/content/79d93072-42c6-4985-8c89-4b6d05b80736/web/Mon_Accessibility_All_form_submission_error_messages_location_of_form_on_page_click_cancel.png) 10. Fill out the form with invalid data.  1. Attempt to submit it. 2. Check for any error messages. If you encounter any, make sure that they can help the user identify and fix the error. ![Error message given when the user attempts to submit the incorrectly filled out form The error message reads, "Please include an '@' in the email address. 'Jane Doe' is missing an '@'".](https://acquia.widen.net/content/ba31bb80-d535-490e-8dbd-827db387505c/web/Mon_Accessibility_All_form_submission_error_messages_location_of_form_on_page_test_form_error_msg.png) 11. **If the error message is helpful**: Mark the check as “Reviewed” from the Web Governance browser extension. ![Location of the "Mark as reviewed" button below an error in the browser extension.](https://acquia.widen.net/content/b9f423cd-731d-46ba-b4ee-abb20ac74441/web/Mon_Accessibility_All_form_submission_error_messages_location_of_form_on_page_test_form_reviewed.png) * **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](/web-governance/how-review-accessibility-issue "How to review an accessibility issue") Note  It is not required for the error messages to reveal any information that can compromise website security. Additional resources -------------------- This section contains useful resources for this subject. ### WCAG success criteria * [3.3.3 Error Suggestion.](https://www.w3.org/WAI/WCAG21/Understanding/error-suggestion.html) ### Other resources [Forms Tutorial from W3C.](https://www.w3.org/WAI/tutorials/forms/) ### Related articles [The visual presentation of UI and graphics components have a contrast ratio of at least 3:1 against adjacent color(s)](/web-governance/are-important-ui-and-graphical-components-distinguishable "Are important UI and graphical components distinguishable?")