Form submission error messages provide assistance in correcting errors
3.3.3 Error Suggestion
Introduction
This check aims to ensure that users receive appropriate suggestions so that they can correct form input errors.
What
When a user submits a form with errors, the error messages must describe the issue and provide clear suggestions on how to fix it.
For example, instead of informing Invalid password, provide a more helpful message such as: The password must be at least 8 characters long and include a number.
Provide specific guidance so that users can quickly understand what went wrong and how to correct it.
Why
Users need a way to identify errors and get the information about how to fix them with minimal effort.
Affected users
This check primarily affects:
Users with cognitive disabilities: They may struggle to understand vague error messages.
Screen reader users: If errors are not described clearly, these users may not know how to fix them.
Limited technical knowledge: Some users may not be familiar with specific format requirements.
Provide clear and actionable suggestions to improve usability and accessibility for all users.
Examples
This section provides some pass and fail examples of this issue.
Pass examples
The error message identifies the problem and offers a solution
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required>
<span id="email-error" style="color: red;">Please enter a valid email address in the format: [email protected].</span>
Why this works:
The error message explains the issue and the solution.
Use aria-describedby for accessible error messages
<label for="phone">Phone Number:</label>
<input type="text" id="phone" name="phone" aria-describedby="phone-error">
<span id="phone-error" style="color: red;">Phone number must be in the format (123) 456-7890.</span>
Why this works:
The error message is linked to the input field so that assistive technologies can read it.
Form submission error messages provide assistance in correcting errors
3.3.3 Error Suggestion
Introduction
This check aims to ensure that users receive appropriate suggestions so that they can correct form input errors.
What
When a user submits a form with errors, the error messages must describe the issue and provide clear suggestions on how to fix it.
For example, instead of informing Invalid password, provide a more helpful message such as: The password must be at least 8 characters long and include a number.
Provide specific guidance so that users can quickly understand what went wrong and how to correct it.
Why
Users need a way to identify errors and get the information about how to fix them with minimal effort.
Affected users
This check primarily affects:
Users with cognitive disabilities: They may struggle to understand vague error messages.
Screen reader users: If errors are not described clearly, these users may not know how to fix them.
Limited technical knowledge: Some users may not be familiar with specific format requirements.
Provide clear and actionable suggestions to improve usability and accessibility for all users.
Examples
This section provides some pass and fail examples of this issue.
Pass examples
The error message identifies the problem and offers a solution
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required>
<span id="email-error" style="color: red;">Please enter a valid email address in the format: [email protected].</span>
Why this works:
The error message explains the issue and the solution.
Use aria-describedby for accessible error messages
<label for="phone">Phone Number:</label>
<input type="text" id="phone" name="phone" aria-describedby="phone-error">
<span id="phone-error" style="color: red;">Phone number must be in the format (123) 456-7890.</span>
Why this works:
The error message is linked to the input field so that assistive technologies can read it.
Web Governance