Banner

Banner is a type of notification that displays a message or provides feedback related to the user’s current workflow, spanning the page or container horizontally. It can communicate new information, errors, warnings, or successful completion of a process or task.

Also known as: Alert, Application Message, Notification, Strip, System Message
View source code
Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

Best practices

Check and test any focusable elements included in the banner content.

When using a banner to alert the user, apply role="alert". When using a banner to notify the user, apply role="status".

  • Note: There are known screen reader announcement issues when dynamically inserting content with role="status". During your testing, if you find that adding role="status" to the banner does not properly announce content using a screen reader, we recommend preloading a container with role="status" that will house the banner. That will ensure the content is properly announced via screen reader.

Keyboard interactions

KeyFunction
Tab

Tab moves focus through the interactive elements.