This document provides information about the following Acquiq Web Governance accessibility check:
Are form submission errors helpful?
What
This check aims to ensure that users receive appropriate suggestions so that they can correct form input errors. 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 the message 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.
Who
Affected users
This check affects users who have:
Cognitive disabilities: Who may struggle to understand vague error messages.
Visual impairments: Who use screen readers to complete forms. 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.
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.
This document provides information about the following Acquiq Web Governance accessibility check:
Are form submission errors helpful?
What
This check aims to ensure that users receive appropriate suggestions so that they can correct form input errors. 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 the message 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.
Who
Affected users
This check affects users who have:
Cognitive disabilities: Who may struggle to understand vague error messages.
Visual impairments: Who use screen readers to complete forms. 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.
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