Why don't the filters in my webshop work with a screen reader?

Filters often lack name, role, or status announcement

Product filters typically do not work with a screen reader because it is not sufficiently clear what a filter is, what its current status is, or what happens when the user makes a selection. Filters in many web shops consist of checkboxes or buttons that work fine visually, but are incompletely structured programmatically: a checkbox without an associated label, a button that only shows through a color change that a filter is active, or a filter panel that opens without a screen reader announcing it. For a sighted visitor, this is not a problem, because they see the change. For a screen reader, that visual change does not exist — it needs a technical announcement.

Another recurring problem is that the results list changes, but a screen reader does not pick up on it. For example, "24 results" may be displayed under the filter, but without this being communicated as a status announcement, so the user must search for what has changed. This is closely related to how headings and structure are built on the page, because a screen reader often navigates via that structure to determine where the results begin — more about this is covered in Why doesn't a screen reader read the headings on my page correctly?. The way focus behaves after applying a filter also plays a role: if focus jumps unexpectedly to another part of the page, a screen reader user loses their place, as described in Why does the cursor or focus jump around on my website?.

What WCAG says about this

That filters must be able to communicate a name, role and status to assistive technology such as a screen reader, and that status changes such as a changed result count are announced, follows from the criteria on name, role and value and on status messages in WCAG 2.1 (W3C) — the level that is in practice expected via EN 301 549. An automated scan recognizes some of these defects, such as a checkbox without a label, but whether a status announcement is actually understandable to a user requires an assessment that a scan cannot make — see an automated accessibility test can find everything.