Role and semantics
Section titled “Role and semantics”By default Banner has no role and is read at the start of the page. For a banner that appears later, announce gives danger role="alert" and other tones role="status". The tone is read as a visually hidden prefix (“Warning:”); the icon is not read.
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Tab | Moves to the action and the close button. |
| Enter | Opens the link or runs the button. |
The banner takes no focus. When it is closed, focus moves to the next control.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
| Warning banner | “Warning: Maintenance is planned tonight from 23.00 to 01.00. Details, link” |
| Close button | “Dismiss, button” |
Contrast
Section titled “Contrast”Text and the link reach at least 4.5:1 on each tone’s bold background. The link is underlined, so it does not rely on colour.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How Banner meets it | What product teams do |
|---|---|---|
| 1.4.1 Use of colour | Tone is given by the prefix, the link by its underline. | Nothing. |
| 4.1.3 Status messages | status or alert with announce. |
Turn on announce for banners that appear later. |
| 1.4.3 Contrast | Contrasting text on the bold background. | Nothing. |