Selection Chip Accessibility
Best Practices
A selection chip must use a native button and expose whether its value is applied with aria-pressed . The visible chip text must provide the button's accessible name.
A selection chip is a visual alternative to a checkbox, but it does not natively store HTML form data. The application must store the selected value when the form requires it.
When selection chips appear in a group, the group must have an accessible name that describes the choice. The applied state must not be communicated by color alone.
The decorative trailing icon must use aria-hidden="true" .
Interaction Design
Keyboard
Pressing TAB key must move focus to the selection chip unless it is disabled.
Pressing ENTER or SPACEBAR key must toggle the chip's applied state.
Screen Reader
A screen reader must announce the chip text, button role, and pressed state. A disabled selection chip must remain available to screen readers and announce its disabled state.
Pointer
Clicking or tapping the selection chip must toggle its applied state.
ARIA Reference
| Attribute | Description |
|---|---|
| aria-pressed | Applied to the button to communicate whether the chip's value is applied. |
| aria-hidden="true" | Applied to the decorative trailing icon to hide it from assistive technologies. |