Spark Design System
Accessibility
Form errors
Provide accessible error handling
Why it matters
Providing information about how to avoid and correct input errors allows users who have learning disabilities to fill in a form successfully. Users who are blind or have impaired vision understand more easily the nature of the input error and how to correct it. People with motion impairment can reduce the number of times they need to change an input value. Never rely solely on color to indicate errors. Best practices are to provide multiple cues when identifying errors (e.g., in addition to describing the error in text, the fields in error are highlighted).
WCAG 2.0 reference: 3.3.3 Labels or Instructions, 3.3.6 Error Prevention, 3.3.1 Error identification, SC 3.3.3 Error suggestions
Example
Bad error formatting:
Example of bad error handling
Good error formatting:
Example of good error handling
How to check for this
- Check that concise and specific text information is provided to help people avoid, understand and fix the error in a way that is easy to understand for everyone. If the error concerns a format such as date, time, or address, check that the format requirement is clearly explained. Manual
- Check that the item that is in error is visually identified/highlighted. Manual
- Check that the errors are easily findable (before the form or inline). Manual
- Check that each error listed references the label of the corresponding form control, to help users recognize the control. Manual
- Check that the fields without errors are still populated with the data entered. Users should not have to re-enter all the information in the form, except for some sensitive data such as credit card numbers. Manual
- Guidelines for listing a set of errors at the top of the page. Manual
- Guidelines for inline feedback and errors. Manual
Collaborators
- Should there be any instructions or error messages missing or unclear, reach out to your Designer.