Error Messages
Definition
Text that explains what went wrong when users make mistakes, and helps them fix the problem to complete their task.
What are Error Messages?
Error messages are notifications that appear when something goes wrong – form validation failures, system errors, or unsuccessful actions. Good error messages explain what happened and how to fix it.
They're crucial for accessibility because unclear errors leave users stuck, especially when using assistive technologies.
Why Error Messages Matter
User Recovery
Users make mistakes. Helpful errors guide them back on track rather than leaving them frustrated.
Accessibility Requirement
WCAG requires that errors be identified and described in text. Screen reader users need errors announced clearly.
Conversion Impact
Confusing error messages cause form abandonment. Clear messages keep users moving toward completion.
Reduced Support Load
Good errors let users self-serve rather than contacting support.
Writing Good Error Messages
Be Specific
Not "Invalid input" but "Email address must include an @ symbol."
Be Human
Not "Error 403: Authentication failure" but "That password doesn't match our records. Please try again."
Offer Solutions
Don't just state the problem – explain how to fix it.
Avoid Blame
Not "You entered an invalid date" but "Please enter the date as DD/MM/YYYY."
Error Message Examples
Form Validation
| Bad | Good |
|---|---|
| Invalid email | Please enter a valid email address (e.g., name@example.com) |
| Password error | Password must be at least 8 characters with one number |
| Required field | Please enter your phone number |
System Errors
| Bad | Good |
|---|---|
| Error 500 | Something went wrong on our end. Please try again in a few minutes |
| Request failed | We couldn't process your payment. Please check your card details |
Accessibility Requirements
Announce to Screen Readers
Use aria-live="polite" or role="alert" to ensure screen readers announce errors.
Associate with Fields
Connect error messages to their inputs using aria-describedby:
<input type="email" aria-describedby="email-error">
<span id="email-error">Please enter a valid email address</span>
Don't Rely on Colour Alone
Use icons, text, and positioning – not just red colouring.
Focus Management
When showing errors, move focus to the first error or an error summary.
Error Message Placement
Inline Errors
Show errors next to the relevant field. Most effective for form validation.
Summary at Top
List all errors at the top of the form. Link each to the relevant field.
Modal/Toast Messages
For system errors or confirmations. Use sparingly and ensure keyboard accessibility.
Timing
Validate on Submit
Show errors when users attempt to submit. Avoids premature criticism while typing.
Validate on Blur
Check fields when users leave them. Catches errors early without interrupting typing.
Clear on Correction
Remove error messages once users fix the problem.