Action chips can havearia-labelledby oraria-label tags that provide additional content to the visible label. However, the visible label must be included within the accessible label.

When an interactive chip is disabled, thearia-disabled tag is set totrue .

Make sure that focus is moved to an intuitive element of the page after a chip is dismissed.

When an icon is slotted into a chip, ensure it either has an accessible label provided through alt text on an<img> , a title element within an<svg> , or anaria-label . If the icon is purely decorative, usearia-hidden=true to hide it from assistive technology.

The action chips component has been based on the following resources:

We've tested this component against WCAG 2.2 Level AA. It's been tested with NVDA and VoiceOver, and several different users with different interaction methods.