The Badge is a compact, non-interactive indicator used to convey status, count, or notification state.
It may display a dot, number, or text label, and it must communicate its meaning clearly through text or accessible labels — never color alone.
| Interaction | Behavior |
|---|---|
| Tab | Skipped — badges are not focusable by default. |
| Enter / Space | Not applicable — badges are non-interactive. |
| Focus | If the badge is part of an interactive parent (e.g., button or tab), focus is handled by that parent. |
If a badge triggers an action (rare), it must use a proper role (button) and follow full button accessibility standards.
Mark up as a decorative element inside a container with accessible text.
<span aria-label="3 new notifications">
<span class="badge">3</span>
</span>
If the badge appears beside a label, screen readers should read it in context:
<button aria-label="Inbox, 5 unread messages">
Inbox <span aria-hidden="true" class="badge">5</span>
</button>
→ Screen reader announces: “Inbox, 5 unread messages”.
Dots that indicate presence or updates must be described textually.
<span role="status" aria-label="New activity available">
<span class="badge-dot" aria-hidden="true"></span>
</span>
If the badge reflects dynamic information (e.g., new messages):
Use role="status" or aria-live="polite" so updates are announced automatically.
<span role="status" aria-live="polite" aria-label="2 new messages"></span>