| Table of Contents |
|---|
When to use this
...
component
Use product alerts to tell the user about something they need to know about, but that’s not directly related to the page content, for example:
A significant situation, such as a site-wide service disruption, or other critical information that will impact most users
Important recent or upcoming changes to a process or service
When not to use this
...
component
Do not use product alerts to tell the user about validation errors – Use in In-line alerts instead
Do not use product alerts for information that is directly relevant to the thing the user is doing on that page – Use page Page alerts instead
Do not use product alerts just for styling regular content (for emphasis or highlighting)
Best
...
practices
Do
Write concise headings and copy
Place product alerts at the top of the page above the main heading or global header bar, as applicable
Remove alert text once the issue is resolved or enough time has passed that the information provided is no longer new
Describe the impact on the user
Use product alerts sparingly to avoid alert fatigue
Use an appropriate status – Please see the Guidelines for Alerts article
Don’t
Stack product alert banners
Tips
Consider how tall the product alert banner will appear on mobile screens
Since product alerts can impact the visibility of other content, use a link or call to action to direct users to further information, as needed
Accessibility
The WCAG criteria outlined in this section were chosen because they represent some of the most common failures when designing and implementing these components. For a comprehensive list, please see Web Content Accessibility Guidelines (WCAG) 2.1 (w3.org).
1.4.3 Contrast (Minimum)
The intent of this success criterion is to provide enough contrast between text and its background so that it can be read by people with moderately low vision (who do not use contrast-enhancing assistive technology). Text that is larger and has wider character strokes is easier to read at lower contrast. The contrast requirement for larger text is therefore lower.
...
Understanding Success Criterion 1.4.3: Contrast (Minimum) | WAI | W3C
1.4.11 Non-text Contrast
The intent of this success criterion is to ensure that active user interface components (i.e., controls) and meaningful graphics are distinguishable by people with moderately low vision. Low contrast controls are more difficult to perceive, and may be completely missed by people with a visual impairment.
...
Understanding Success Criterion 1.4.11: Non-text Contrast | WAI | W3C
4.1.3 Status Messages
This criterion requires that, in content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.
...
Understanding Success Criterion 4.1.3: Status Messages | WAI | W3C
Key
...
component features
Telerik provides four built-in notification types that can be modified for use as product alerts
...
: error, warning, info and success. They also offer the option to define your own type by customizing the template and setting options for size, colour and position.
Blazor Notification Demos - Overview | Telerik UI for Blazor
...
Examples
| Info |
|---|
Pending: Will add Note: The following example is a visual illustration of how this component could be used in a MAACE application. Live examples of the Telerik UI component implemented in MAACE applications will be added when available. |
...
...
Responsive design
In order to be inclusive to all users, we need to consider how our applications behave on smaller viewports. (For more information on viewports, see The viewport is the window to your site – Digital.gov.) While designing and building using responsive design principles will allow you to create an optimized layout for users accessing your application on smaller viewports, this is not the only benefit. This will also ensure you are supporting users with low vision who need to enlarge text by using the browser’s zoom function.
To help ensure the responsiveness of your application, consider the following points when designing alerts:
Preservation of content - Content shouldn’t be removed or changed to view an application on a smaller screen size. Don’t change or reduce the amount of text or functionality of an alert to fit a smaller screen size.
Concise text - Keep text concise to avoid taking up larger amounts of space then necessary on smaller screen sizes.
Consistency and visibility - The location of a product alert shouldn’t change or be hidden when viewing on a smaller screen size. The entire alert should be visible without needing to scroll horizontally.
...
Resources
Government of Canada
...
resources
Contextual alerts - Canada.ca design pattern - Canada.ca
Alert fatigue during COVID-19 | Canada.ca blog
External
...
resources
Critical alerts | Ontario Design System
...