WCAG 3.3.3 — Error Suggestion

Who Is Affected

All users benefit from clear error suggestions, but this particularly impacts users with cognitive disabilities, learning disabilities, and users who are not native English speakers who may struggle to understand what went wrong or how to proceed.

What This Means

When someone makes an error on your website — like entering an invalid email address or leaving a required field blank — the error message should not only identify the problem but also suggest how to fix it. Vague messages like "Invalid input" or "Error" don't help users understand what they need to do differently.

Good error suggestions are specific and actionable. Instead of "Invalid email," use "Email address must include an @ symbol, like name@example.com." Instead of "Password error," use "Password must be at least 8 characters and include one number."

Fix: CMS / Theme

Most form error messages are controlled by your CMS or form plugin settings. Updating these templates fixes the messages site-wide.

Joomla

1. Go to System → Global Configuration → Server → Error Reporting
2. For contact forms: Extensions → Modules → Contact or your form component
3. Look for "Error Messages" or "Validation Messages" settings
4. Replace generic messages with specific suggestions:
   • Change "Invalid" to "Please enter a valid [field type] like [example]"
   • Change "Required" to "This field is required. Please enter your [field name]"
5. Test each form field to ensure the new messages appear correctly

WordPress

1. For Contact Form 7: Contact → Contact Forms → Edit form → Messages tab
2. For WPForms: WPForms → Settings → Validation → Error Messages
3. For Gravity Forms: Forms → Settings → Validation Messages
4. Update each error message template to include specific guidance:
   • Email validation: "Please enter a valid email address like name@example.com"
   • Phone validation: "Please enter a 10-digit phone number like 555-123-4567"
   • Required fields: "This field is required. Please provide your [field name]"

Fix: Content Editor

For individual forms or custom error messages on specific pages:

1. Locate the form in your page editor
2. Access the form's validation settings (this varies by form builder)
3. Review each field's error message
4. Replace vague messages with specific suggestions that include:
   • What the user did wrong
   • What they should do instead
   • An example of correct formatting when applicable
5. Test the form by intentionally triggering each error to verify the messages appear correctly

Example improvements:

• "Invalid date" → "Please enter date as MM/DD/YYYY, like 12/31/2024"
• "File error" → "Please upload a PDF, Word, or image file smaller than 10MB"
• "Invalid characters" → "Please use only letters, numbers, and hyphens in this field"

Standard Reference

WCAG 2.1 Success Criterion 3.3.3 — Error Suggestion, Level AA

If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content.

• W3C Understanding SC 3.3.3
• WCAG Technique G83 — Providing text descriptions for required fields
• WCAG Technique G85 — Providing text descriptions for input format
• WCAG Technique G177 — Providing suggested correction text
• WCAG Failure F85 — Not providing correction suggestions