WCAG 3.3.1 — Error Identification — form errors not identified

Who Is Affected

Screen reader users who cannot see visual error indicators, users with cognitive disabilities who need clear error explanations, users with low vision who may miss subtle error styling, and users with color blindness who cannot distinguish error colors from normal text.

What This Means

When a user submits a form with errors (missing required fields, invalid email format, etc.), the website must clearly identify which fields have problems and describe what's wrong. Simply highlighting a field in red or showing a generic "Please fix errors" message doesn't meet accessibility requirements.

Errors must be identified in text that assistive technology can read, associated with the specific form fields that have problems, and provided in a way that doesn't rely solely on color or visual cues.

Fix: CMS / Theme

Most form error identification issues stem from the theme or form plugin not providing accessible error messages by default.

For Joomla:

1. Go to Components → Contact (or Forms extension if using third-party forms)
2. Check your form's error handling settings
3. Ensure error messages include specific field names and clear descriptions
4. Verify that aria-describedby attributes link error messages to their fields
5. Test that error messages appear in the page's heading structure or are announced to screen readers

For WordPress:

1. Go to the form plugin settings (Contact Form 7, Gravity Forms, etc.)
2. Enable accessible error reporting in the plugin options
3. Customize error message templates to include:
   • The field name that has the error
   • A clear description of what's wrong
   • Instructions on how to fix it
4. Ensure error messages are programmatically associated with form fields

Common fixes across platforms:

• Error messages should appear above the form or at the top of the page
• Each error message should identify the specific field and explain the problem
• Use aria-describedby to connect error text with form fields
• Provide error summaries that list all problems in one place

Fix: Content Editor

If you're using simple contact forms or embedded forms where you can edit the error messages:

1. Locate the form's error message settings in your editor
2. Replace generic messages like "Error" or "Required" with specific descriptions:
   • Instead of: "Required"
   • Use: "Email address is required"
3. For validation errors, explain what format is expected:
   • Instead of: "Invalid"
   • Use: "Email address must include @ symbol (example: name@example.com)"
4. Test the form by submitting it with errors to verify messages are clear and specific

Standard Reference

WCAG 2.1 Success Criterion 3.3.1 — Error Identification, Level A

If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.

• W3C Understanding SC 3.3.1
• WCAG Technique G83 — Text descriptions for required fields in error
• WCAG Technique G85 — Text description when input falls outside required format
• WCAG Technique SCR18 — Client-side validation and error notification
• WCAG Technique ARIA21 — Using aria-describedby for error messages
• WCAG Failure F82 — Visual formatting alone to indicate required fields