Where an error occurs, the issue can be identified and is described to the user in text
Design Notes
Ensure form errors can be identified by all users
Make sure that error messages clearly describe what went wrong and how to fix the problem.
Do not rely on colour changes alone to indicate issues. For example, simply adding a red border to an input field would not be accessible — a text description is also needed.
Include an error message wherever there's a problem with the input and check that it's visibly obvious that the message is connected to that input.
If you have an error summary at the top of a form, check that each error in the list has a link that moves the focus to the relevant form field. This helps users who rely on keyboard navigation.
Related
- See live GOV.UK error message and error summary component examples.
Developer Notes
Following design instructions, ensure an error message is displayed in text and preferably linked programmatically to the relevant form field/issue.
Testing Notes
To check, generate an error.
- Navigate the page with a tab key or shift+tab in reverse order.
- Check a descriptive error message is displayed for each item in error, which is read by a screen reader when the error has focus
- Make sure that the link for each error message is reachable with a keyboard.
WCAG Reference: Understanding Success Criterion 3.3.1 Error Identification