Page alerts are used to notify users of important information or changes on a page, in a way that attracts the user's attention without interrupting the user's task. Typically they appear at the top of a page following a submit action.
ARIA alert role
We removed the ARIA alert role (
role="alert" ) from the Page Alert component as it was being used incorrectly. The ARIA role is now optional and we recommend it being used in certain situations.
role="alert" will immediately interrupt assistive technology to inform users of the alert and for this reason should be used sparingly.
We recommend only using the
role="alert" when there is important time-sensitive information that would be detrimental for a user to miss.
The visual design of the page-alerts was a challenging problem to resolve due to the considerations which needed to be balanced.
- The component should use conventional alert/warning colours.
- The component can't rely on colours to indicate meaning.
- The component also comes in light and dark themes.
The solution relies on a few factors:
Icon shape. The icons selected use different background shapes to convey some meaning and draw inspiration from the shape of Australian traffic signals to convey severity.
Icon symbols. The colour of the icon symbols is the same as the text-colour, and the background for the symbol is always the same as the background colour. This guarantees that the icon symbol will always pass colour contrast ratio (provided that the default text and background do).
Alert title. We can't simply rely on icons and colour to convey meaning, so an alert title should always accompany the alert text. Using a meaningful title like "Error" in the occurance of an error can help users who can not perceive or understand meaningful colors.