Auditing Product Filter and Sort Controls on Collection Pages
Filters and sorting are how shoppers actually shop a large catalogue. An audit guide for the controls that decide who can narrow a range and who cannot.
On a collection with two hundred products, the filter panel is the shop. Shoppers who cannot operate the filters cannot shop the range, however accessible the product pages themselves are. Yet filters are often supplied by an app and skipped in audits that focus on templates the store controls.
This guide audits the filter and sort experience end to end: opening the panel, applying options, understanding results, and clearing selections.
Start with opening, focus, and panel structure
On mobile especially, filters hide behind a button that opens a drawer or panel. That button needs an accessible name that says filters, a state that shows whether the panel is open, and focus that moves into the panel predictably and can leave it without a mouse.
Inside, each filter group needs a heading or group label: size, colour, price, availability. A flat list of forty checkboxes with no grouping forces screen reader users to build the structure by listening to every item in order.
Check how selections and result counts are announced
Applying a filter should update the result count and the product list in a way a screen reader user can perceive, without yanking focus away from the control they just used. Silent updates leave shoppers unsure whether anything happened.
Selected filters need visible, removable summaries, each with a clear remove control. A shopper who cannot see which filters are active, or cannot remove one without resetting everything, loses control of the very task filters exist to support.
Audit sort as carefully as filter
The sort control is often a custom dropdown that looks like a menu and behaves like neither a menu nor a select. It should be a native select where possible, or a fully keyboard operable equivalent with its current value announced and its options reachable in order.
Check that sorting does not reset scroll and focus to the top without warning, and that the chosen order survives moving to a product and back. Losing place after every sort makes comparison shopping exhausting for everyone, and impossible for some.
Include filter URLs and empty states
Filtered views get shared, bookmarked, and indexed. The URL should reflect the selection so a returning shopper lands on the same view, and the page title or heading should reflect it too. Test a shared filtered link cold, with no session, as a new visitor would meet it.
Empty results are an accessibility moment as well as a merchandising one. The no results message should be announced, explain which filters caused it in plain language, and offer a labelled action to clear them, not a dead end page.
Related reading
If this topic is useful, these earlier guides go deeper on connected questions: Watching Third Party Embeds: Maps, Videos, and Social Feeds, Accessibility Watch for Holiday Landing Pages, and Watching Subscription and Replenishment Pages for Barriers.
Frequently asked questions
What is the most common filter barrier?
Custom filter controls built from clickable text with no keyboard operation and no accessible name. The panel looks complete on screen while being unusable without a mouse.
Should result counts update live?
Yes, and the update should be perceivable: an announced count or a clear status near the results, without moving focus. Shoppers need confirmation that a selection did something.
Is a native select better for sorting?
Usually. A native select brings keyboard behaviour, naming, and mobile handling for free. Custom sort controls should only replace it when they match that behaviour completely, which is rarer than teams expect.
How do I audit filters supplied by an app?
The same way as any other component: keyboard only, screen reader, zoom, and touch passes on a real collection, with defects logged against the app vendor with reproduction steps. Supplier origin does not change shopper impact.