Banner

Banner displays a prominent message, usually on system level, and provides actions for users to address or dismiss.

• Default behavior
  • role="status"
  • aria-live="polite"
  • Updates are announced once the user is idle.
• Changing the behavior
  • You can override both role and aria-live to fit the context.
  • For critical information, use role="alert" so assistive technologies interrupt and announce immediately.
• Dismissal
  • Users can dismiss the banner with the Escape key when it is focused.

• Use status (default) for non-critical updates, confirmations, or informational messages (e.g., “Settings saved”).
• Use alert for urgent, time-sensitive, or error messages that require immediate attention (e.g., “Payment failed”).
• Do not overuse alert — frequent interruptions can overwhelm users.

Vivid Banner: Manual accessibility test