Accessibility

A chip is a selectable option the user turns on and off, so it follows the WAI-ARIA Button pattern as a toggle button. A chip that opens a dropdown is a trigger instead, and follows the Menu Button pattern. Both meet WCAG 2.1 AA. An accessible chip stays reachable and operable from the keyboard, exposes its on/off state to assistive technology, and takes its accessible name from its label — so the choice it holds is clear whether the user is looking at it, listening to it, or tabbing through it.

For designers

• The label, icons, and every state must meet accessible contrast on each supported surface (default, on-image, on-solid). Source: WCAG 1.4.3 Contrast (Minimum).
• The selected state must never be conveyed by colour alone — reinforce the selected fill with the leading check icon or another non-colour cue. Source: WCAG 1.4.1 Use of Color.
• Focus styles must stay visible, meet contrast on every supported surface, and be clearly distinguishable from both hover and the selected state. Source: WCAG 2.4.7 Focus Visible.
• Use semantic colour tokens (e.g. foreground/neutral/default) rather than fixed values, so chips adapt correctly across themes and surfaces.

For developers

A chip is a native HTML <button> used as a toggle, following the WAI-ARIA Button pattern. Because it is a real button it is focusable and keyboard-operable with no extra wiring, and it carries a pressed state so assistive technology can announce whether the option is currently on. When several chips form a filter set, wrap them in a named group so their shared purpose is announced. The per-element roles, names, and states — including how the decorative icons stay out of the accessible name — are in the Labelling elements section below.

A chip that opens a dropdown is a trigger, not a toggle: it exposes whether its panel is open rather than whether it is on, so it never carries a pressed state. When the panel closes — on a choice or on Escape — focus returns to the chip, and the chip’s label updates to reflect the selection. The panel’s own list and keyboard handling belong to the Dropdown. Source: WCAG 2.1.1 Keyboard.

Keyboard interaction

Key	Action
Enter / Space	Toggle the focused chip on or off, or open a trigger’s panel
Escape	Close a trigger’s panel and return focus to the chip
Tab / Shift + Tab	Move to the next / previous chip or control

Chips must be at least 24 px on their smallest side so they clear the WCAG AA target-size minimum for comfortable touch use. Source: WCAG 2.5.8 Target Size (Minimum).

Labelling elements

Give every element the role, name, and state assistive technology needs.

Toggle chip

A native <button> (implicit role="button") that takes its accessible name from its label text — keep that text self-describing, since a selected chip may be announced out of context. Reflect the selected state with aria-pressed (true when on, false when off) so it is announced, not shown by styling alone. The decorative leading and trailing icons carry aria-hidden="true" so the name stays just the label.

Dropdown trigger

A native <button> with aria-haspopup matching the panel’s role (listbox for the Dropdown recipes), aria-expanded set to true while the panel is open and false while it is closed, and aria-controls pointing at the panel’s id. Leave aria-pressed off — a trigger opens something, it isn’t on or off. Its accessible name is the label, so keep the label in step with the selection: the chosen value, or the filter name with a count such as “Body type (2)”. The trailing chevron carries aria-hidden="true".

Filter group

Wrap a set of related chips in a role="group" element and name it with aria-label (or aria-labelledby), e.g. aria-label="Filter by fuel type", so assistive technology announces what the chips choose between.

Source: WCAG 4.1.2 Name, Role, Value, WCAG 1.3.1 Info and Relationships.