Banner
A floating top-of-viewport notification for global, non-blocking feedback. Supports semantic states, optional action, dismiss behavior, and timed or persistent visibility.
Keyboard interaction
| Key | Action |
|---|---|
| Tab | Moves focus to action button (if present), then dismiss button (if present). |
| Shift + Tab | Moves focus in reverse order. |
| Enter / Space | Activates focused action or dismiss control. |
Live region behavior
| Attribute / Property | Value / Behaviour |
|---|---|
role="status" + aria-live="polite" | Used for info, success, and warning states. Announced when screen reader user is idle. |
role="alert" + aria-live="assertive" | Used for error state. Announced immediately for urgent issues. |
aria-hidden="true" (icon) | Status icon is decorative and hidden from assistive technologies. |
aria-label="Dismiss banner" | Provides accessible name for icon-only dismiss button. |
WCAG 2.2 compliance
✓
2.1.1 Keyboard — A
All interactive controls in the banner are keyboard reachable and operable.
✓
2.4.7 Focus Visible — AA
Action and dismiss controls render a visible focus indicator via shared focus styles.
✓
4.1.3 Status Messages — AA
Announcements are delivered through status/alert live regions without moving user focus.
✓
1.4.1 Use of Color — A
State meaning is not color-only; iconography and text content communicate intent.
Best practices
- Use assertive announcements sparingly — reserve error state for truly urgent conditions to avoid interrupt fatigue.
- Do not force focus on open — banner should inform without hijacking focus; users can tab into controls when needed.
- Respect reduced motion — entry and exit transitions should remain minimal for users with motion sensitivity preferences.