WebAIM - Web Accessibility In Mind

E-mail List Archives

What's the best way to identify semi-related filter options (a.k.a., facets)?

for

From: Jeremy Echols
Date: Aug 11, 2021 1:52PM

Say I'm on an e-commerce site like Amazon and looking for music. They'll have things like "Format" where you can look only for music that's available on cassette, CD, Vinyl, etc. But these options aren't mutually exclusive, so you can look for anything that's on cassette or CD, not just one or the other.

Say you have a dozen or so of these top-level categories. There might be "genre", "decade", etc.

Some argue that each of these sections should be a fieldset, because then the checkboxes are all given a label. For instance, the "decade" fieldset might have a legend of simply "Decade" and each checkbox then has the context "Decade" in front of it.

Others argue that headings make more sense, because a fieldset should be used for values that apply to a single field, not choosing options from a similar category. The claim is that the heading of "Decade" is enough context to know that the "1980s", "1990s", and "2000s" checkboxes are filters within that category. Or if it isn't, the claim is that you can apply something like "aria-describedby" to add context.

I'm personally a bit torn. The fieldset approach gives free context, while using headings means we either assume the headings give enough context, or we have to add more description (which means a rougher UI or else screen-reader-only text). But semantically it feels like all the checkboxes, no matter which category they belong to, are equally related to each other. A fieldset implies a strong, tight grouping of fields, but in this scenario the category is just an organization of fields that are all answering a single question: "how would you like to refine your search?"

So my questions:


* Can both approaches be made WCAG compliant? I am pretty sure they can, but I want to be certain.
* Is a heading (h1, h2, h3) enough context for such groupings of checkboxes or would additional labeling be necessary?
* Is one option clearly more semantically correct than the other, or is this one of those "more art than science" situations?