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: Jeremy Echols
Date: Aug 13, 2021 9:46AM

Oh, this is perfect. Thanks!

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Birkir R. Gunnarsson
Sent: Thursday, August 12, 2021 19:12
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] What's the best way to identify semi-related filter options (a.k.a., facets)?

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?
>> >> >> https://urldefense.com/v3/__http://list.webaim.org/__;!!C5qS4YX3!Uxve
>> BGs8EsEYgn5SoZMnHa10dctHzSqZbldufK6b-YiLH75fJD843Sun1xSLw7HowA$
>> List archives at
>> https://urldefense.com/v3/__http://webaim.org/discussion/archives__;!
>> !C5qS4YX3!UxveBGs8EsEYgn5SoZMnHa10dctHzSqZbldufK6b-YiLH75fJD843Sun1xQ
>> QEdBrrw$ >
> > > https://urldefense.com/v3/__http://list.webaim.org/__;!!C5qS4YX3!UxveB
> Gs8EsEYgn5SoZMnHa10dctHzSqZbldufK6b-YiLH75fJD843Sun1xSLw7HowA$
> List archives at
> https://urldefense.com/v3/__http://webaim.org/discussion/archives__;!!
> C5qS4YX3!UxveBGs8EsEYgn5SoZMnHa10dctHzSqZbldufK6b-YiLH75fJD843Sun1xQQE
> dBrrw$ >


--
Work hard. Have fun. Make history.