dta.gov.au

The .gov.au means it’s official

Australian government websites always use a .gov.au domain. Before sharing sensitive information online, make sure you’re on a .gov.au site by inspecting your browser’s address (or 'location') bar.

This site is secure.

The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Page alerts

v2.1.3

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.

Released

History
View changes
Install
npm i @gov.au/page-alerts
Tags
Requires
Contributors
  • Simon Pascal Klein avatar picture
  • Alex Page avatar picture
  • Trevor Brennan avatar picture
  • Julian Fleetwood avatar picture
  • Dominik Wilkowski avatar picture
  • Patrick De Young avatar picture
  • Gary Broadbent avatar picture

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.

Using 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.

More about Using the alert role

Visual Design

The visual design of the page-alerts was a challenging problem to resolve due to the considerations which needed to be balanced.

  1. The component should use conventional alert/warning colours.
  2. The component can't rely on colours to indicate meaning.
  3. 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.