A banner is a one-line, full color, full width container that can be used to communicate short snippets of information to users. Banners are un-intrusive, non-dismissible, and only support link buttons.
Keyboard users should not be able to focus on a banner, as it is not an interactive element.
Screen reader users should be able to have a screen reader describe the contents of a banner, but not focus on or interact with a banner otherwise.
- Check the color contrast of a banner and any text on it to make sure they can be read by users with color blindness or other visual impairments.
No props need to be added or modified for banner accessibility.
View source on GitHub