Faceted Filter

Accessible collapsible filter groups that let shoppers narrow product results by category, with live result count updates communicated to assistive technology.

Demo

Expand and collapse the filter groups by clicking their headings. Select one or more checkbox options within a group and observe how the result count updates. Try using the keyboard alone — Tab to reach each group header, Enter or Space to toggle it, then Tab into the checkboxes and use Space to select them.

What to Observe

Each filter group header acts as a disclosure button — its expanded or collapsed state is communicated programmatically, not just visually.
When a group is collapsed, its checkbox options are hidden from both sight and the accessibility tree so screen reader users do not encounter invisible controls.
Selecting a checkbox triggers a live-region update that announces the new result count without requiring the user to navigate away.
Checkboxes within each group are grouped under a shared label so users understand which filter category they belong to.
The component is fully operable by keyboard, with logical focus order between groups and within their option lists.

Anatomy

[Anatomy image placeholder — will be added when assets are available]

Filter panel: The outer container that groups all filterable facets and establishes the landmark region for the filtering controls.
Group header / disclosure button: A button that labels the filter category (e.g., "Color", "Size") and toggles the visibility of its options.
Options list: The collapsible region containing the checkboxes for a given facet, hidden when the group is collapsed.
Checkbox option: An individual filter choice within a group; each has a visible label and a programmatic association to its parent group.
Result count live region: A visually styled count that doubles as an ARIA live region, announcing updated totals to screen readers when filters change.
Clear filters action: A button or link that resets all active filters and restores the full result set.

Accessibility Behavior

Each group header button exposes its expanded or collapsed state through a programmatic attribute so screen readers announce "expanded" or "collapsed" alongside the group name.
Collapsed option lists are completely removed from the focus order and the accessibility tree, not just visually hidden with CSS opacity or off-screen positioning.
Checkboxes within a group share a programmatic group label so users hear the category name (e.g., "Color: Red, checkbox") when navigating by form controls.
Changes to the result count are announced via a polite live region — users are informed after they finish interacting, not interrupted mid-action.
The clear-filters action has a descriptive accessible name and is reachable by keyboard without needing to traverse every checkbox first.
Focus is never moved automatically when a filter is selected; users remain in control of where they navigate next.

Common Mistakes

Implementing group headers as styled div elements instead of buttons, preventing keyboard users from toggling filter groups without a mouse.
Hiding collapsed options with CSS visibility or opacity alone rather than the hidden attribute, leaving invisible checkboxes in the focus order.
Updating the result count only visually without a live region, meaning screen reader users must navigate to find it after each selection.
Omitting a group label for the checkbox list so screen reader users hear option names like "Red" without knowing they belong to the "Color" filter.
Using color alone to indicate an active filter state, making selected filters indistinguishable for users with color-vision deficiencies.

Why This Matters

Faceted filtering is the primary way shoppers narrow large product catalogs. If filter groups cannot be toggled by keyboard, or if option selections produce no announcement for screen reader users, those users are effectively locked out of a core shopping workflow. A blind user who cannot hear the updated result count has no feedback that their selection did anything at all. Accessible filter panels ensure every shopper — regardless of how they navigate — can efficiently find what they are looking for.

Accessibility Validation

This component is validated against internal accessibility criteria aligned with WCAG standards, using our internally developed system, Resonance Specs.

To learn more, please contact us.