Overview
In-page alerts are a helpful tool for informing users about essential updates or modifications on a webpage, all while capturing their attention without disrupting their ongoing task.
Usually positioned at the top of a page after a submit action, these alerts are designed to be noticeable yet unobtrusive.
There are 4 types of in-page alerts in the Design System including:
- information
- success
- error
- warning.
Information
This is for things you should know, but they're not super important. They can be helpful tips or messages that don't need a lot of attention. In general, they're used for time-sensitive information.
<div role="region" aria-label="Information" class="qld__page-alerts qld__page-alerts--svg qld__page-alerts--info">
<div class="qld__page-alerts__icon">
<svg aria-label="Information" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--sm">
<use
href="./?a=343804#alert-information">
</use>
</svg>
</div>
<h2 class="qld__page-alerts--heading qld__display-lg">Information title</h2>
<div>
<p>This is info <a href="https://qhonline.com.au/qgds-development/sandbox/sanam/tags">link</a></p>
</div>
</div>
Success
The success page alert is used for notifying the user they did something right or an action was successful, like submitting a form.
<div role="region" aria-label="Success" class="qld__page-alerts qld__page-alerts--svg qld__page-alerts--success">
<div class="qld__page-alerts__icon">
<svg aria-label="Success" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--sm">
<use href="./?a=343804#alert-success"></use>
</svg>
</div>
<h2 class="qld__page-alerts--heading qld__display-lg">Success title</h2>
<div>
<p>This is success <a href="www.google.com">link</a></p>
</div>
</div>
Error
The error page alert should be used with form validation errors or other errors that will block the user from completing their task. This is for when something really bad happens, like the website crashing.
Error Title
This is error
<div role="region" aria-label="Error" class="qld__page-alerts qld__page-alerts--svg qld__page-alerts--error">
<div class="qld__page-alerts__icon">
<svg aria-label="Error" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--sm">
<use href="./?a=343804#alert-error"></use>
</svg>
</div>
<h4 class="qld__page-alerts--heading qld__display-lg">Error Title</h4>
<div>
<p>This is error</p>
</div>
</div>
Warning
Use warning page alerts to tell the user something urgent. Only use an alert if the information will help the user avoid a problem. This style of alert is used to warn you about something that might go wrong, like your password expiring.
Warning
This is warning
<div role="region" aria-label="Warning" class="qld__page-alerts qld__page-alerts--svg qld__page-alerts--warning">
<div class="qld__page-alerts__icon">
<svg aria-label="Warning" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--sm">
<use href="./?a=343804#alert-warning"></use>
</svg>
</div>
<h2 class="qld__page-alerts--heading qld__display-lg">Warning</h2>
<div>
<p>This is warning</p>
</div>
</div>
Usage guidelines
When to use
- To notify users of important information or changes that require their attention that are unique to the content of a particular page
- To provide feedback on user actions, such as confirming that a form was successfully submitted, or notifying users that on errors within a form
- To warn users of potential consequences or risks of an action
When not to use
- For trivial or non-urgent information that doesn't require immediate action or attention, such as general news or updates
- To promote products or services or for advertising purposes
- To interrupt users unnecessarily or distract them from the task at hand
How to use them
In-page alerts are a way to get a user's attention on a webpage. They usually pop up after you do something on the page or when something important happens. It's important to use alerts correctly so that people pay attention to them.
Make sure to use the right kind of alert for the right situation, and give enough information to help people understand what's going on. Don't use critical alerts for little things like validating information.
Here are some tips.
Do
- Use simple language that's easy to understand
- Show the alerts at the right time and in the right place
- Use the right type of alert for what you need it for
- Use an alert title to accompany the alert text
Don't
- Use too many alerts, or people will start to ignore them
- Use alerts that show up on every page
Research and rationale
The design of our page alerts is based on the research completed by the DTA and the usage guidelines outlined by the NSW Design System page on in-page alerts.
Colour and icons based on research for Global alerts
The visual design is consistent with the DTA but uses our system alerts colours based on the research completed for the global alerts and the design being designed to work on both light and dark backgrounds.
Because alerts shouldn't rely on icons or colour alone to convey meaning, an alert title has been included to accompany the alert text.
Difference between global and in-page alerts
One of the primary differences is that in-page alerts are designed to be not dismissible. This is in-order to ensure that important information is communicated to the user and not missed (Digital NSW, n.d.).
Consistency
In-page alerts are designed with a consistent layout to aid comprehension of what they are and how they work, all in-page alerts types are designed to appear as if they're part of the same family of components (Digital NSW, n.d.).
Classes
| Name | Description |
|---|---|
| Success messages. |
| Default warning. |
| General information. |
| Critical warning. |
Accessible in-page alert requirements
Keep these considerations in mind if you're modifying the Design System or creating a custom component.
ARIA role
Critical alerts global alerts should have a role=”alert”. The alert role should only be used for information that requires the user's immediate attention (Mozilla Developer Network, 2021).
All other global alerts should have a role=”status” and are read after any critical announcements (Shopify, n.d.).
WCAG guidelines
2.1 Keyboard Accessible
Ensure that global alerts are operable by providing keyboard accessibility. Users should be able to navigate and interact with alerts using only a keyboard, without requiring a mouse or other pointing device. This includes ensuring that all interactive elements within the alert are keyboard accessible (W3C, 2018).
3.1.2 Language of Parts
Ensure that global alerts are understandable by using clear and concise language. Alerts should be written in plain language, using simple vocabulary and sentence structures to make them easy to understand for all users (W3C, 2018).
4.1: Compatible
Ensure that global alerts are robust by using standard markup and code that is compatible with assistive technologies. Alerts should be coded using semantic HTML and CSS, and any scripts or other technologies used should be compatible with assistive technologies such as screen readers (W3C, 2018).
References
Digital NSW (n.d.) In-page alert, NSW Design System, accessed 10 April 2023.
Digital Transformation Agency (2018) Page Alerts, Gold Design System (Formerly DTA), accessed 10 April 2023.
Standards Australia (n.d.) AS 1319-1994 REC:2018, Standards Catalogue, accessed 10 April 2023.
Mozilla Developer Network (2021) Alert role, MDN Web Docs, accessed 10 April 2023.
W3C (2018) Web Content Accessibility Guidelines (WCAG) 2.1, World Wide Web Consortium, accessed 10 April 2023.