Why it matters
Users need clear text descriptions of errors to understand what went wrong and how to fix it, not just color changes or icons.
Common violations
- Errors indicated only by red borders
- Generic error messages like 'Invalid input'
- Error icons without text descriptions
- Errors not associated with their fields
Code examples
Bad
<input class="border-red-500" aria-invalid="true">Good
<input aria-invalid="true" aria-describedby="email-error">
<p id="email-error" class="text-red-500">Please enter a valid email address</p>How to fix
Provide specific text descriptions for each error, associate them with form fields using aria-describedby, and ensure errors are announced to screen readers.
Related criteria
Related resources
Scan your site