AccessibilityError messages
When a user gets something wrong on a page, it’s important they know about it so they can fix it.
See the impact that notifications and feedback have on user interaction.
Helping everyone
All users benefit from clear, descriptive error messages that are used consistently.
Good error messages can stop people from breaking the law or missing a necesssary financial transaction - things that can have serious consequences.
People are often stressed when they make an error, so using clear language and design for your error messaging is essential.
The basics
Do:
- provide an example of the format - input required when there are specific requirements
- allow the user to review, correct, and confirm the information they have entered
- present any error messages in text
- tell the user where the error occurred and what caused the error
- tell users how they can fix the error
Do not:
- use colour alone to show an error
| User | Access need | May find helpful |
|---|---|---|
| Blind | Cannot see the visual elements of an error message | Presenting errors in text, which will be announced by screen readers |
| Partially sighted | Views the site with magnification software | Making sure that error messages are close to the input field |
| Cognitive, language and learning disability | May have difficulty understanding the meaning of icons and visual cues | Presenting errors in text |
| Cognitive, language and learning disability, people with low digital literacy | May be easily confused by unexpected things happening when there’s an error | Clear, descriptive error messages that work in a consistent way |
| Motor impaired | Difficulty or cannot use a mouse so cannot put information in lots of times | Provide input format requirements to avoid errors, allow users to pick from restricted values |
| People who may be more likely to make mistakes. People with lower digital literacy, non-English speakers | Avoiding serious consequences | Provide a way to review, correct, and confirm the information entered, provide guidance and support |
Preventing errors in the first place
If the user needs to follow specific format input requirements, you should provide hint text by the form fields.
These requirements include:
- not being empty
- minimum and maximum length
- characters that are required or prohibited
- if input must be a number, and if it must be a whole number
- range of numbers accepted
You must allow a user to correct any financial or personal data they put in. One way of doing this is to ask them to review, correct and confirm before submitting their information.
There is a check answers pattern that allows users to do this.
You must also allow the user to cancel a submission or transaction entirely.
Writing good error messages
Think about error messages as early on as possible to allow interaction and content designers to take into account all accessibility requirements.
A content designer should always be involved in writing your error messages.
Say what’s gone wrong
You should use simple language to explain the error and what has caused it.
The GOV.UK design system has an error message component and specific error patterns for asking users for things such as their National Insurance number.
Do not use colour alone to identify an error.
Suggest how to fix it
You must give suggestions for correcting the error, unless the suggestion would compromise security.
For example, if the user has put in an incorrect date format, you should include the correct format in the error message to help them. Do not simply repeat the hint text - you should provide additional guidance to supplement this.
Do not mix client -side and server -side validation as the two may conflict and cause issues. Inline validation that takes place on when a user moves away from the field may cause issues as people may prefer to fill fields out in a different order.
To check, generate some error messages by incorrectly filling in a form and check that these support the user to input the right type of data and recover from the error.
Put your error messages in an obvious place
If errors occur when the user submits a form, make sure an error summary appears at the top of the form. You should place keyboard and visual focus at the summary to alert screen reader users to the errors.
You should also make the page title element change to include the word ‘error’ to highlight to a user that an error has occurred.
If possible you should also display errors in line with the form field, between the label and the form element. Ensure that the error message is programmatically associated with the input field so that the error is announced when a screen reader user navigates through fields with the tab key.
Get in touch
If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.