Filter Chip Accessibility

Best Practices

Use a native button when applying the filter updates content on the current page. The button must expose whether the filter is applied with aria-pressed .

Use a link when applying the filter navigates to another page. An applied link must include clipped text that communicates the applied state.

A filter chip used as a menu button must have a permanent visible label that describes its purpose, such as "Brand: Yamaha" or "Brand: Yamaha (+3)." It must expose whether the menu is open with aria-expanded .

Decorative leading icons must use aria-hidden="true" . Expressive images that duplicate the visible chip text must use an empty alt attribute.

Interaction Design

Keyboard

Pressing TAB key must move focus to the filter chip unless it is disabled.

Pressing ENTER or SPACEBAR key on a button filter chip must toggle its applied state. When used as a menu button, either key must toggle its expanded state.

Pressing ENTER key on a filter link must navigate to the link destination. The destination page must render the filter link in its new state.

Screen Reader

A screen reader must announce the visible label, element role, and pressed state for a button filter chip. For a filter link, it must announce the clipped applied-state text when the filter is applied.

For a menu button filter chip, a screen reader must announce the visible label, button role, and expanded or collapsed state.

Pointer

Clicking or tapping a button filter chip must toggle its applied state. When used as a menu button, it must toggle its expanded state. Clicking or tapping a filter link must navigate to the link destination.

ARIA Reference

Further Reading

• Menu Button
• APG Button Pattern