Chip / Tag
An interactive tag or chip component
Related WCAG criteria — click to view details
Code example
Common baseline
Applies to all design systemsInteractive chips must be buttons
Clickable / removable chips must render as <button> or role="button" and participate in the Tab sequence.
Label the remove button
Icon-only remove buttons must expose an accessible name like aria-label="Remove <tag name>".
Group chips with a role and label
When multiple chips are grouped together, use role="group" or role="listbox" with an aria-label that states the group purpose.
Keyboard interaction
Enter/Space must activate the chip, and removable chips must support Backspace/Delete while focused.
Move focus after deletion
After removing a chip, shift focus to an adjacent chip or the parent container so focus is never lost.
Expose selection state
Selectable chips must announce state via aria-pressed or aria-selected.
Do not conflate click and delete
A single chip should not both toggle selection and trigger deletion on the same click. Delete actions belong in a dedicated button.
Icon-only buttons need an accessible name
A × glyph with no aria-label leaves screen reader users without any indication of the action.
Additional checks
onDelete / onClick enable button semantics automatically
MUI Chip participates in the Tab order and handles Backspace/Delete when onDelete is provided. These behaviors are built in, so rely on them rather than reimplementing.
Verify custom deleteIcon labels
A custom deleteIcon may drop the default accessible name. Provide an aria-label on the Chip itself so the removal target is still clear.
Never rely on color alone
Do not use the color prop (primary/success/error) as the sole way to communicate state; pair it with a text label or icon.
Code sample
Implementation notes
- –Adding onClick or onDelete to a MUI Chip automatically includes it in the Tab order and gives it role='button' semantics.
- –While focused, Backspace and Delete invoke onDelete, and Escape blurs the chip (built-in MUI behavior).
- –Default delete icon labels vary by language. Add an aria-label on the Chip or embed the meaning in the label itself for clarity.
- –Give the Stack role="group" and an aria-label so assistive tech announces the chip group as a single named region.