Banner
Messages that indicate the global status of an application or website.
Creating access for everyone, everywhere requires attention to accessibility attributes, best practices, and requirements. Find accessibility guidance below.
Note: Components in each code library are implemented differently (especially Flutter). Many of the behaviors and attributes described are already handled for you as part of our components. Product teams are responsible for ensuring their apps meet all current requirements. Some of the information below may not apply to your implementation.
Best practices
Ensure the following best practices are met when implementing this component during development.
- Don’t move focus to the banner when it opens to avoid interrupting the user’s work flow.
- Position the banner at or near the top of the page content in the DOM.
- Ensure banners remain visible even when the page is scrolled below the fold.
- Ensure banners never cover the rest of the page, even with high zoom levels and small screen sizes.
- Use roles and attributes to announce the banner content to the user.
Screen reader
- Use
for error messages and system messages. This is equivalent to paired with .
- Use
for informational or success messages. This is equivalent to paired with .
Keyboard controls
Banners are comprised of other elements that use standard keyboard actions.
Note: Activating the Escape key does not close the banner, as that might disrupt what the user is doing by closing something else.
| Key | Behavior |
|---|---|
| Tab | Moves focus to the next focusable element. |
| Enter or Space | Prompts the action associated with the focused interactive element. |
| Shift + Tab | Moves keyboard focus backwards to the previous interactive element in the banner. |