For accessibility reasons, error messages should display:
- underneath the field that contains an error
- and above the form
The error message under the field should:
- Relate specifically to that field
- Not be a generic message that could apply to any field
- Be an active sentence, eg ‘enter the…’
- Be highlighted in yellow
Error messages must state clearly what in particular the error was and what the user needs to do to proceed. Avoid unclear UI, like this example from TfL, which doesn’t provide any clarity on why a fare has changed:
The error message at the top of the form should read, “Sorry there was a problem|Please check the highlighted fields to proceed.”
Email address front-end validation is done through asking the user to enter their email address twice. This reduced the risk of the user entering their email address incorrectly.
More recent guidance on tone in user interfaces from GOV.UK suggests we shouldn’t use the word ‘Please’ or ‘Sorry’ in validation error messages. This is something to consider, both in terms of our existing forms and new forms.