Skip to content

Accessibility

A badge is a small, non-interactive label or indicator that conveys a status, category, or count. It takes no keyboard focus and follows no APG interaction pattern — so an accessible badge is about meaning, not operation, and meets WCAG 2.1 AA. Its meaning must live in text (or an accessible name), never in colour alone; and when a badge reflects an important or changing status — such as a notification count — that status must be exposed to assistive technology rather than left as a purely visual cue.

For designers

Section titled “For designers”
  • Badge text and its background must meet contrast minimums on every surface the badge sits on. Source: WCAG 1.4.3 Contrast (Minimum).
  • Status must never be conveyed by colour alone — an error badge and a success badge must also differ in text, icon, or shape, so the meaning survives for colour-blind users and in greyscale. Source: WCAG 1.4.1 Use of Color.
  • Use semantic colour tokens (e.g. foreground/neutral/default) rather than fixed values, so the badge adapts correctly across themes and surfaces.

For developers

Section titled “For developers”

A badge renders as a non-interactive element — a <span>, not a control — and is not in the tab sequence, so it needs no keyboard or focus handling and no role. Add ARIA only where the meaning isn’t already carried by visible text; the per-variant naming is in the Labelling elements section below.

Labelling elements

Section titled “Labelling elements”

Give each badge variant the accessible name assistive technology needs.

Status badge

Takes its accessible name from its visible text content — keep that text self-describing and no ARIA is needed. The leading icon is decorative and repeats what the text already says, so mark it aria-hidden="true". Use a .sr-only span if the label has to be visually hidden.

Number badge

A bare count like 3 isn’t self-explanatory — add an aria-label that supplies the context, e.g. aria-label="3 unread notifications". When the count updates in place, wrap it in role="status" so the change is announced.

Icon-only badge

A badge with an icon and no text has nothing to name it — give the badge an aria-label that states the meaning and keep the icon itself aria-hidden="true", so the name comes from the badge rather than from the glyph.

Source: WCAG 4.1.2 Name, Role, Value.