In-page alerts are used to contextually inform users of important information or status of an interaction.
Use in-page alerts to attract the user's attention. Alerts are often displayed following a user interaction or system event. The level of attention is dependent on the importance of the alert.
Do:
Do not:
In-page alerts come in standard and compact. The standard variant can be used to deliver an alert for a section or overall context. The compact variant can be used for in-line alerts or where the alert needs to be isolated, such as in forms where it relates to just one field.
In-page alert are styled according to their purpose:
Information alert
Designed to be less intrusive or interruptive than other levels of alert:
Success alert
Warning alert
Critical alert
The family of alerts is designed with a consistent layout to aid comprehension of what they are and how they work.
They are designed to look 'not always present', to draw the user's attention.
The type and urgency of the alert is communicated through colour and the icon used.
The icons used are industry standard, with the exception of the warning and critical icons which are somewhat interchangeable. Both the warning and critical icons are perceived as more important to aid the user's comprehension.
The alerts are not dismissible.
All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.
For in-page alerts in the design system, ensuring WCAG 2.2 AA compliance requires careful attention to consistency and accessibility. Alerts should be configured to deliver clear, actionable guidance without disrupting user flow. This means applying consistent language, formatting, and placement to make alerts easily recognisable across the interface. Ensure each alert is accessible, with clear labels and instructions that screen readers can interpret effectively. Additionally, users should be able to reference alert content without needing to re-trigger it.
Following these guidelines helps to create a cohesive, accessible experience, aligning with best practices for usability and accessibility in your design system.
Rockdale Service Centre is coming soon
Rockdale Agency will close on 9 March 2018 and re-open in April. Please visit Kogarah Service Centre during this closure.
Rockdale Agency will close on 9 March 2018 and re-open in April. Please visit Kogarah Service Centre during this closure.
It looks like there was a problem
Please contact your service desk for further assistance.
It looks like there was a problem. Please contact your service desk for further assistance.
Password expiring soon
Your password is expiring in 4 days. Please change your password.
Password expiring soon. Your password is expiring in 4 days. Please change your password.
Your application has been received
Thank you for submitting your interest. We will be in contact within 5 business days.
Your application has been received. We will be in contact within 5 business days.