Badge

A removable label used to represent active filters or selections, with a keyboard-accessible remove button that announces its action to assistive technology.

Demo

Tab to reach each badge's remove button and press Enter or Space to dismiss it. Observe how the button's accessible name identifies which badge will be removed, and how screen readers announce the change when a badge is dismissed.

What to Observe

• Each remove button is reachable and operable by keyboard
• The remove button's accessible name includes the label of the badge it will dismiss
• Removing a badge does not leave focus stranded — focus moves to a logical next target
• Screen readers announce the removal action in a way that provides context
• Badges convey their label through text, not color or icon alone

Anatomy

[Anatomy image placeholder — will be added when assets are available]

1. Badge Container — the wrapping element that groups the label text and the remove button into a single perceived unit
2. Label Text — the visible text identifying the filter or selection the badge represents
3. Remove Button — a native button element that dismisses the badge; its accessible name must reference the badge label so the action is unambiguous
4. Remove Icon — a decorative symbol (typically an X) inside the remove button; hidden from assistive technology since the button's accessible name carries the meaning

Accessibility Behavior

• Use a native button element for the remove control so it is keyboard operable and has the correct implicit role without additional attributes
• Give the remove button an accessible name that includes the badge label, so screen reader users understand exactly what will be removed before activating the button
• When a badge is removed, move focus to a predictable location — such as the next badge, the previous badge, or the filter input — so keyboard users are not left without a focus position
• Announce the removal to screen reader users via a live region or by ensuring the focus destination provides clear context about the current state
• Ensure the badge label is conveyed through text visible to all users, not through color or icon alone

Common Mistakes

• Using a generic icon button with no accessible name, leaving screen reader users with no indication of what the button does or which badge it removes
• Removing a badge and leaving focus stranded at a now-absent element, causing keyboard users to lose their position in the page
• Implementing the remove control as a non-interactive element such as a span, making it unreachable by keyboard
• Relying solely on the X icon to communicate the remove action without any text alternative
• Not announcing badge removal to assistive technology, leaving screen reader users unaware that the filter was dismissed

Why This Matters

Badges appear in filtering and tagging interfaces where users actively manage their current selections. When the remove button lacks a meaningful name, a screen reader user hears only "button" — with no indication of which filter they are about to clear. When focus is not managed after removal, keyboard users lose their place entirely. These failures accumulate in interfaces where users are expected to add, review, and remove multiple selections. Getting this right ensures all users can efficiently manage their filter state without confusion or lost context.

Accessibility Validation

This component is validated against internal accessibility criteria aligned with WCAG standards, using our internally developed system, Resonance Specs.

To learn more, please contact us.

Code

Reference Implementation

• Back to Home
• GitHub Code