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.

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.

The alert component is based on the following resources:

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.