WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Birkir R. Gunnarsson
Date: Aug 12, 2021 8:11PM

I use grouping elements (<fieldset> or <div role="group">) to group
elements with a common group label, including filters.

I find this to be the best user experience, since the group label is
programmatically available, the screen reader can treat it with
maximum efficiency, and we're not forcing the common label on every
single individual control label (either via label or description).
For filters that instantly affect the search results I use toggle
buttons (button elements with with an aria-pressed attribute) instead
of checkboxes.
The difference is minor but a checkbox is primarily for forms and the
expectations is that you need to submit a form (activate a button) for
the checkbox state change to impact the webpage.
Here is how I would code a search result filter with 45 days being active
<div role="group" aria-labelledby="gt">
<h3 id="gt">Include transactions within</h3>
<button aria-pressed="false">Last 30 days</button>
<button aria-pressed="true">Last 45 days</button>
<button aria-pressed="false">Last 6 months</button>
</div>


On 8/11/21, Aditya via WebAIM-Forum < <EMAIL REMOVED> > wrote:
> Jeremy,
>
> May be use both.. fieldset and heading tag wrapped in legend.
>
> It provides heading navigation option and context for input elements.
>
> Aditya
>
>
> Sent from my iPhone
>
>> On Aug 11, 2021, at 2:52 PM, Jeremy Echols < <EMAIL REMOVED> > wrote:
>>
>> 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?
>> >> >> >> >
> > > > >


--
Work hard. Have fun. Make history.