Chip Accessibility

Best Practices

Static Chip

A static chip contains non-interactive text for readonly content. It must not contain interactive elements.

Removable Chip

A removable chip must use a native button adjacent to the chip text for its delete action. Activating the button must remove the entire chip from the page.

The delete button must have an aria-label that describes the action and use aria-describedby to associate the action with the visible chip value. The decorative delete icon must use aria-hidden="true" .

Use a selection chip or filter chip when the chip itself toggles a value or filter. Removable chips are primarily used in the chips combobox pattern.

Interaction Design

Keyboard

Pressing TAB key must move focus to the delete button unless it is disabled.

Pressing ENTER or SPACEBAR key must activate the delete button. After the chip is removed, the application must move focus to the next interactive element.

In a chips combobox, focus must move to the textbox when no next chip is available. In other chip groups, when no next chip is available, focus must move to a nearby static heading within the component. The heading must use tabindex="-1" to receive programmatic focus without entering the sequential tab order.

Screen Reader

A screen reader must announce the delete action, button role, and associated chip value. Chip text and the delete button must remain available to screen readers when the button is disabled.

Pointer

Clicking or tapping the delete button must remove the entire chip.

ARIA Reference

Further Reading

• Chips Combobox
• APG Button Pattern