Alerts notify users about important pieces of information. They can be categorised as success, information, warning or error messages.
Alerts communicate important messages about the status of a system or service to users. They are categorised as success, information, warning or error messages, with a colour associated to each state. You can read more about when to use which alert in the copy guidance section.
When using alerts:
- keep messaging short and simple
- consider how they might draw focus from other elements of an experience, as they are disruptive
- use ARIA to announce the alert to screen reader users when it appears
- if the alert can be dismissed, make sure that focus is moved to the alert when it appears and then returned to the previously focused element when closed.
Alerts are for messages of medium importance. For highly important messages, consider a modal instead.
Standard alerts can’t be dismissed, and will remain on screen as long as the user is on it.
Dismissable alerts include a close action so that users can choose to dismiss them. The close icon has the accessible name ‘close’.
Alerts can be organised into four different semantic categories: information, error, warning and success. Each of these categories is denoted by a different colour.
However, remember that colour alone isn’t enough to communicate effectively with all users. All of the information the user needs must be contained within the copy itself.
When writing copy for alerts:
- keep the message concise and the language simple
- be specific rather than generic
- include a next action, if one is needed
Information messages are associated with the semantic colour blue. They’re used for messages that might help a user to complete their task, but don’t require any action from the user in order to progress.
Error messages are associated with the semantic colour red. They’re for communicating issues with the system or service to the user, and are typically used in situations where the user’s not able to progress.
Warning messages are associated with the semantic colour yellow. Like an error message, they’re for communicating issues with the system or service, but with a lower level of emphasis. For example, the user may still be able to progress.
Success messages are associated with the semantic colour green. They’re for acknoweldging that an action that a user has taken has been successfully submitted to the system.