Intelligence Community Design System

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.

Dismissible chips use the role of button as opposed to link in order to help users of assistive technologies understand that the button is performing an action on the page instead of navigating them to a new location. Users should be aware that activating the button will remove the chip from the list.

The 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.