Banner

Keyboard

Keep the message itself out of the tab order. Make any action or close buttons reachable with Tab and usable with Enter or Space.

Semantics

Choose a role that matches the message's urgency. Explain the status in text as well as color.

Checklist

• Choose a role that matches the message's urgency and avoid duplicate announcements.
• Explain the outcome and any required action in text, as well as through the icon or background.
• Give action and close buttons clear labels, and move focus appropriately when the banner disappears.

For contrast, zoom and screen reader checks, see the common accessibility checklist.