Use a page alert to notify users of important information or changes on a page.
How page alerts work
Page alerts occur after a change of context. For example, when a user clicks a link or submits a form, launching a new page or an updated view.
Success and error summary alerts are used following a form submission. When the new page or view is first loaded, ensure that focus is moved to the success or error summary alert. Screen readers will then announce the alert, letting the user know the status of their form submission and what to do next.
The HTML title element should also start with copy that indicates the status (for example, “Success:” or “Error:” or “There is a problem:”) to ensure feedback is provided in the page’s name.
Best practices
Page alerts are typically at the top of the page and above the main body content. In some cases, there might be an alert needed for a particular section of a page - in this case, place the alert next to impacted points of service or information.
If a user is required to do something in response to an alert, let them know what they need to do and make that task as easy as possible, for example by providing a link.
Types of page alerts
There are four main types of page alerts:
Information
Warning
Success
Error
Information
Use information alerts for time-sensitive information. For example, important dates, recent content updates, and new policies.
Informational alert messages should be dismissible using an ‘X' in the top right corner to close. Make sure the 'X’ is keyboard-focusable.
Warning
Warning alerts tell the user something urgent or help the user avoid a problem. For example, travel information, content trigger warnings, or location closures.
Warning alerts should not be dismissible.
Success
Default to using toasts for success messages, unless the feedback is delayed, persistent, has a call to action, and/or marks the end of a process (e.g. the form was submitted, here is your reference #).
Success alerts should be used to tell the user that the action was successful. Use them for confirmation messaging as a user completes sections in a web form. For example, when a payment has been successfully processed in a transaction.
Success message should be dismissible using an 'X' in the top right corner to close.
Error summary
Error alerts tell users that the action was unsuccessful or that there was a validation error upon submission of a form. For example, a user incorrectly completes a field and the system does not allow the user to complete the task upon submission unless the errors are fixed. Use a hyperlink for each field that needs to be corrected, listed in the order that they appear on the form. Upon clicking the hyperlink, the user is brought to that field.
Error messages must not be dismissible.
Error messages
Put the message in red between the field label and the input. If the input has a border such as a text input or calendar picker, give the input field a red border. Here are two examples:
To help screen reader users, the error message component includes a hidden ‘Error:’ before the error message. These users will hear, for example, “Error: The date your passport was issued must be in the past”.
Be clear and concise
Describe what has happened and tell them how to fix it. The message must be in plain English, use positive language and get to the point.
Do not use:
technical jargon like ‘form post error’, ‘unspecified error’ and ‘error 0x0000000643’
words like ‘forbidden’, ‘illegal’, ‘you forgot’ and ‘prohibited’
‘please’ because it implies a choice
‘sorry’ because it does not help fix the problem
‘valid’ and ‘invalid’ because they do not add anything to the message
humourous, informal language like ‘oops’
Do not give an example in the error message if there is an example on the screen. For example, if you are asking for a National Insurance number and include ‘QQ 12 34 56 C’ as hint text, do not include an example in the error message.
Above all, aim for clarity.
Read the message out loud to see if it sounds like something you would say.
Be consistent
Use the same message next to the field and in the error summary so they:
look, sound and mean the same
make sense out of context
reduce the cognitive effort needed to understand what has happened
Use the question or form label in the error to provide context. For example, ‘Enter how many hours you work a week’ for ‘How many hours do you work a week?’
Be specific
General errors are not helpful to everyone. They do not make sense out of context. Avoid messages like:
‘An error occurred’
‘Answer the question’
‘Select an option’
‘Fill in the field’
‘This field is required’
Different errors need different messages. For example, text fields may be:
empty
too long
too short
using characters that are not allowed
in the wrong format
An error for a specific situation is more helpful. It will tell someone what has happened and how to fix it.
Use instructions and descriptions
Some errors work better as instructions and some work better as descriptions. For example:
‘Enter your first name’ is clearer, more direct and natural than ‘First name must have an entry’
‘Enter a first name that is 35 characters or fewer’ is wordier, less direct and natural than ‘First name must be 35 characters or fewer’
‘Enter a date after 31 August 2017 for when you started the course’ is wordier, less direct and natural than ‘Date you started the course must be after 31 August 2017’
Use both instructions and descriptions, but use them consistently. For example, use an instruction for empty fields like ‘Enter your name’, but a description like ‘Name must be 35 characters or fewer’ for entries that are too long.
Technical specifications
A page alert consists of a shaded background with an emphasized left-hand border, an icon, a heading (title of the alert), descriptive text that explains what the alert is about.
Use FontAwesome-solid icons.
Ensure the colour contrast between the icon colour and the background colour is at least 3:1 (use this contrast checker).
When the new page or view is first loaded, ensure that focus is moved to the alert so that screen readers will announce the alert right away.