Success Criterion 3.3.3 Error Suggestion requires that when an input error is automatically detected and suggestions for correction are known, those suggestions must be provided to the user. This helps users understand how to correct their mistakes, ensuring a smoother and more accessible form submission process.
To ensure that when errors occur during user interaction with interactive form controls, suggestions and hints are provided to the user for corrections. This success criterion is akin to Success Criterion 3.3.1 (Error Identification), but it specifically focuses on providing hints and suggestions for errors, whereas Success Criterion 3.3.1 focuses on identifying and presenting errors. Authors can often anticipate specific errors that users may encounter and prepare suggestions accordingly. Error hints may be dynamically provided before the user submits the form or upon form submission.
Errors can be displayed in various formats such as text, radio groups, select inputs, or via group of checkbox fields. The author can predict what the user intended to enter and offer the user options to choose the correct value.
For instance, if a user is required to enter the month they intend to start a subscription and enters a numeric value like '3', upon form submission, an error message could appear indicating an issue with the date field and suggesting a correction like: 'An error has occurred. Please select the start month of the subscription (e.g., January, February, March, April, May, ...).
Descriptive Error Messages: Provide clear and descriptive error messages that explain what is wrong. Avoid generic messages like "Invalid password." Instead, provide specific guidance, such as: "Invalid password. Passwords must contain at least one capital letter (e.g., dRq123)."
Programmatic Association: Ensure that the errors are perceived by assistive technologies, by using WAI ARIA attributes.
Example: Invalid Date Entry in a Form
A user submits a form with an employee's birth date. The user enters first the month then the day then the year. ( MM/ DD/YYYY). The form displays a generic error message: "Invalid date."
Explanation:This error message is vague and does not provide specific instructions on how to correct the error. The user is left unsure of the correct date format.
When the error is detected, an alert dialog with role="alertdialog" is displayed, notifying the user of the mistake and providing instructions to correct it.
<div role="alertdialog" aria-labelledby="alertHeading" aria-describedby="alertText">
<h1 id="alertHeading">Error Message</h1>
<div><p id="alertText">The way the date was inserted is incorrect. Please use the following format as a reference: (YYYY/MM/DD).</p></div>
<button>Save and Continue</button>
<button>Return to page and correct error</button>
</div>
Explanation: This alert dialog clearly identifies the error and provides specific instructions on how to fix it, helping the user to correct the input error efficiently.