Error messages that say 'Invalid' or 'Error' without explaining the constraint leave users — especially those with cognitive disabilities — stuck on forms they cannot fix. WCAG 2.2 SC 3.3.3 (Error Suggestion) is a Level AA requirement: when an input error is detected and suggestions for correction are known, the suggestion must be provided. A password field that says 'Invalid' instead of 'Password must be at least 8 characters with one uppercase letter' causes measurable task abandonment.
Low because the absence of correction suggestions harms completion rates without completely blocking form access — violating WCAG 2.2 SC 3.3.3 at Level AA rather than the more critical Level A SC 3.3.1.
Replace every generic error string with a message that names the constraint and shows the expected format.
// Before — tells users nothing actionable
const errors = {
email: 'Invalid email',
password: 'Error',
phone: 'Required',
}
// After — tells users exactly what to do
const errors = {
email: 'Enter a valid email address (e.g., name@example.com)',
password: 'Password must be at least 8 characters and include one number',
phone: 'Enter a 10-digit US phone number (e.g., 555-867-5309)',
}
Search for error string literals across your form validation logic in src/. Any message under five words — or that only echoes the field name — should be expanded to include the expected format or the correction step.
ID: accessibility-wcag.understandable.error-suggestion
Severity: low
What to look for: Count all unique error message strings across the codebase in form validation. For each, evaluate whether the message tells users both what went wrong and how to fix it, or just states something is wrong.
Pass criteria: Enumerate all unique error message strings found. At least 80% of error messages provide specific, actionable guidance (e.g., "Enter a valid email address (e.g., name@example.com)") rather than just generic text. No more than 2 generic error strings (e.g., "Error", "Invalid", "Required") are acceptable in the entire codebase.
Fail criteria: Error messages are generic ("Error", "Invalid", "Required") without indicating what the user should do to fix the problem.
Skip (N/A) when: Never.
Detail on fail: "Validation error messages in ContactForm.tsx are generic — 'Invalid input' does not help users fix the problem" or "Password field error says 'Invalid' without specifying requirements"
Remediation: Write error messages that help users fix the problem:
// Before — unhelpful
const errors = { email: "Invalid", password: "Error" }
// After — actionable
const errors = {
email: "Enter a valid email address (e.g., name@example.com)",
password: "Password must be at least 8 characters with one number"
}