Banner
How the Banner works with a keyboard and assistive tech, and where it stands against WCAG 2.2 AA.
A banner is a full-width bar with one message about the whole product or account. It carries a live role (role="alert" for errors, role="status" otherwise), one action and a dismiss button, and it sits before the main content so it is met first in reading order.
Keyboard#
Moves to the banner's action, then its dismiss button. The banner never takes focus on its own.
Moves back through the same controls.
Activates the action or dismisses the banner.
Activates the focused button.
Semantics#
role="alert"Assertive: interrupts the screen reader. Right for a new error, too loud for one that was already there.
Errorrole="status"Polite: announced when the screen reader is next idle.
Warning, Success, Information, Feature<section aria-label>Wrap the banner in a labelled region (Account notice, Service status) so it can be found from the landmarks list. The component does not add one itself.
Always<button aria-label="Dismiss">The close button has a name; change dismissAriaLabel to say what is dismissed.
dismissIconaria-hidden="true"The status icon and the ∙ between title and description are hidden; the words carry the status.
Icon and separatorColour contrast#
Every variant and state has to meet WCAG 2.2 Level AA. Measure the colours as they land on screen: a translucent hover or press wash over whatever sits behind it.
Title, description and action · Filled, Light, Lighter, Stroke
14px text and the 16px action against the bar. Filled is white on the status colour; the others are #2a2a2a on a wash, or on white for Stroke (14.35:1).
WCAG 1.4.3 Contrast (Minimum) ↗Status icon and dismiss · All appearances
On a light wash the icon takes the status colour, which falls short for Warning (1.83:1 on Light, 2.19:1 on Lighter); Error on Light only just clears it (3.01:1). The dismiss glyph is white at 72% on Filled, which fails on Warning (1.80:1), Success and Error; elsewhere it is 48% ink and clears 3:1 (3.27:1 on Error Light).
WCAG 1.4.11 Non-text Contrast ↗Focus indicator · Focus visible
A 2px #1a6ef8 ring drawn straight against the bar, with no gap. On Filled it nearly disappears: 1.19:1 on Information, 1.01:1 on Error. Light and Lighter clear 3:1.
WCAG 1.4.11 Non-text Contrast ↗WCAG 2.4.13 Focus Appearance ↗WCAG 2.4.7 Focus Visible ↗Status message · Added after load
A banner that appears after the page loads is announced through its role, without taking focus.
WCAG 4.1.3 Status Messages ↗Measured contrast#
Banner text against the bar for every status, in the three tinted appearances. Stroke is #2a2a2a on white and passes. 3 of 15 pairs fall below their minimum (4.5:1 for text, 3:1 for graphics) and are marked in amber.
Motion#
- The banner has no motion of its own. If it slides in, do it only under prefers-reduced-motion: no-preference.
Checklist#
Filled Warning, Success and Error put white text below 4.5:1 (Error by a hair, at 4.49:1): see the table. Use the Light or Stroke appearance for those until the fills are darkened.
On Filled banners the focus ring has no white gap and nearly vanishes. Add a 2px white gap, as the Alert does, before the code library ships.
The component always sets a live role. A banner present on load is read in order with the page anyway, so an on-load Error banner with role="alert" may be announced twice.
Wrap it in a labelled <section> and place it before <main>.
The dismiss button is 24px, exactly the minimum target. Keep the 12px clear of the right edge so nothing crowds it.
Show one banner at a time. Two stacked bars push the page down and compete to be read first.