Badge

Keyboard

Badge displays information. Do not add keyboard focus or a button role.

Semantics

The text should explain the status without relying on color.

Checklist

• Use text that explains the category or status without relying on color.
• Check contrast between the background and text colors you choose.
• Keep a display-only Badge out of the tab order and do not give it a button role.

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