Alert
Alert
Easy to use for everyone
Where alerts are added to a page content, they can be tabbed to follow the logical page content order.
Where both an action button and a dismiss button are included on an alert, focus is first applied to the action button and then the dismiss button.
For Assistive Technology
Alerts use thealert
role, creating anaria-live
region that's rendered on page load. If the alert appears on the page, it constitutes a status update. Thearia-live
region causes the alert to be brought to the attention of assistive technology users.
By default, the alert uses anaria-live
value ofassertive
to interrupt the user flow to call attention to the status change.
If the alert content is not urgent, consider using anaria-live
value ofpolite
instead. This announces the alert contents after the current element announcement has been completed.
Based on
The alert component is based on the following resources:
-
Alert role, MDN Web Docs , accessed March 2022. -
How to make inline error messages accessible , accessed March 2022.
Testing
We’ve tested this component against WCAG 2.2 Level AA. It’s been tested with NVDA and VoiceOver, and several different users with different interaction methods.