Form error messages
Error messages are essential for users to understand where they've made a mistake, what the mistake or mistakes are, and how to correct them.
If users are just told they have made a mistake, this is not helpful. Content should be provided to tell a user the exact part of a form that has been filled out incorrectly. For example, if characters have been used that are not accepted within that field.
How to prevent issues
Before writing error messages, ensure your forms are easy to understand. This will help avoid errors in the first place, for example:
- write in clear, plain language
- use hint text where information is required in a specific format
- avoid jargon
You can also read guidance from the NHS Digital team for writing good questions (link opens in a new tab).
When you have written your forms, check the error messages to ensure they are clear and easy to understand. An error message needs to:
- help the user understand the problem
- tell the user what to do to resolve the problem
- match against the field input and summary message
- link directly from the summary to the input field with the problem
Clear forms and error messages reduces the chance of poor data getting into DfE systems and services. They help users to complete tasks more effectively and without frustration.
Examples of issues in DfE
Below are some examples of common issues with error messages and how to avoid them.
Non-descriptive error messages
When a user makes a mistake, it's important to provide them with a clear and concise error message that explains what the problem is and how to fix it. This will help users to understand what they need to do to correct the error and continue with their task.
Do
Use descriptive error messages that explain what the problem is and how to fix it.
Don't
Don't use generic error messages that are ambiguous or don't explain the problem.
Showing errors from a server or database
Sometimes errors are raised from a server or database, these errors are not user friendly and can be confusing. It's important to catch these errors and provide a clear, user-friendly message.
Do
Use descriptive error messages that explain what the problem is and how to fix it.
Don't
Don't show database generated errors. They can expose information to hackers.
Not linking error messages to the input
Linking the error message in an error summary section to the input makes it easier for users to find and correct the error. This is particularly important for users who are using screen readers, as it helps them to understand which input the error message is referring to.
Do
Link the error message to the ID of the input that has the error.
Don't
Don't use plain text in error messages. It makes it harder to navigate the form.
Mismatched error messages
Error summaries are a list of all the errors on a page. They are usually placed at the top of the page and help users quickly identify and correct any errors they have made.
Error summaries are particularly useful for users who are using screen readers, as they provide a clear and concise list of all the errors on a page.
Do
Ensure the error is linked to the input in error, and is descriptive.
Don't
Don't have different error messages in the summary and against the input.
Resources and guidance
Find more information on forms and error messages using the following resources:
- Web form design from NN Group(link opens in a new tab)
- WCAG 3.3.6 - Error prevention - Help users prevent errors (link opens in a new tab)
- Forms guidance from the Home Office (link opens in a new tab)
Follow GOV.UK Design System guidance
The GOV.UK Design System provides guidance on the following components and patterns:
Information about this page
- Created
- 12 August 2024
- Last reviewed
- 12 August 2024
- Last updated
- 12 August 2024
- Reason this page exists
- This page exists to help people understand how to prevent introducing common accessibility issues in products and services.
- Suggest a change or comment
- Issue 43