Skip to content

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 — and meets 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

Section titled “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

Section titled “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.

Keyboard interaction

Section titled “Keyboard interaction”
Key Action
Enter / Space Toggle the focused chip on or off
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

Section titled “Labelling elements”

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

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.

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.