Level A
Understandable
WCAG 2.0+
Success Criterion 3.3.1: Error Identification
Official W3C Definition
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.
Why This Criterion Matters
When users make errors in forms, they need to know which field has the error and what the error is. Simply highlighting a field in red is not sufficient - users with visual impairments won't see the color, and screen reader users won't know what's wrong.
Important: Error messages must be in text, not just conveyed through color, icons, or positioning.
Who Benefits
Blind Users
Need text descriptions of errors, not visual cues.
Color Blind Users
Can't rely on red highlighting to identify errors.
Cognitive Disabilities
Clear error messages help understanding what to fix.
Everyone
Clear errors help all users complete forms correctly.
How to Meet This Criterion
Technique 1: Inline Error Messages
Good Example - Error Messages Near Fields
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" name="email"
aria-describedby="email-error"
aria-invalid="true"
class="is-invalid">
<div id="email-error" class="error-message" role="alert">
<i class="fas fa-exclamation-circle" aria-hidden="true"></i>
Please enter a valid email address (e.g., name@example.com)
</div>
</div>Technique 2: Error Summary at Top of Form
Good Example - Error Summary
<!-- Error summary at top of form -->
<div role="alert" class="error-summary">
<h2>There were 2 errors with your submission</h2>
<ul>
<li><a href="#email">Email address is required</a></li>
<li><a href="#password">Password must be at least 8 characters</a></li>
</ul>
</div>
<form>
<div class="form-group">
<label for="email">Email <span aria-hidden="true">*</span></label>
<input type="email" id="email" aria-invalid="true"
aria-describedby="email-error">
<span id="email-error" class="error">Email address is required</span>
</div>
...
</form>Technique 3: Real-Time Validation
Good Example - Live Validation
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password"
aria-describedby="password-requirements password-error">
<div id="password-requirements" class="help-text">
Must be at least 8 characters with a number and symbol.
</div>
<div id="password-error"
role="alert"
aria-live="polite"
class="error-message">
<!-- Error message inserted here dynamically -->
</div>
</div>
Bad Examples
<!-- Bad: Only visual indication of error -->
<input type="text" class="has-error"> <!-- Red border only -->
<!-- Bad: Generic error message -->
<div class="error">There was an error. Please try again.</div>
<!-- Bad: Error not associated with field -->
<input type="email" id="email">
<span class="error">Invalid</span> <!-- No aria-describedby -->
<!-- Bad: Error only shown as icon -->
<input type="text">
<i class="error-icon fas fa-times"></i> <!-- No text explanation -->Common Failures to Avoid
| Failure | Problem | Solution |
|---|---|---|
| Color-only error indication | Color blind users can't see it | Add text error message |
| Vague error messages | "Error" doesn't explain what's wrong | Describe the specific problem |
| Error not linked to field | Screen readers don't associate error with input | Use aria-describedby |
| Error not announced | Screen reader users miss the error | Use role="alert" or aria-live |
| Icon-only error indication | No accessible name for screen readers | Add text description |
Testing Methods
Manual Testing Steps
- Submit empty form: Are errors clearly identified?
- Submit invalid data: Does each error explain what's wrong?
- Check error association: Is each error linked to its field?
- Screen reader test: Are errors announced?
- Color test: Remove color - can you still identify errors?
Related Criteria
3.3.2 Labels or Instructions
Provide labels and instructions for inputs
1.4.1 Use of Color
Color not the only means of conveying information