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 2:35PM

That's also interesting. I wonder if it would make sense to have nested grouping for our filters. This is something I didn't know was even allowed in HTML, much less that it was useful for accessibility.

Again, thanks!

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Sailesh Panchang
Sent: Friday, August 13, 2021 09:52
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] What's the best way to identify semi-related filter options (a.k.a., facets)?

Cannot agree more with Birkir.
But, yes when there is a need, fieldset/legend can be nested and work well with JAWS / NVDA.
e.g.
<fieldset><legend>Have you ever tested positive for or been diagnosed by a member of the medical profession with:</legend> <fieldset><legend>Human Immunodeficiency Virus (HIV)</legend> <p><label><input type="radio" name="grp1">Yes</label></p> <p><label><input type="radio" name="grp1">No</label></p> </fieldset> <fieldset><legend>Acquired Immune Deficiency Syndrome (AIDS)</legend> <p><label><input type="radio" name="grp2">Yes</label></p> <p><label><input type="radio" name="grp2">No</label></p> </fieldset> </fieldset>

Thanks,
Sailesh

On 8/13/21, Jeremy Echols < <EMAIL REMOVED> > wrote:
> 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!Uxv
>>> e BGs8EsEYgn5SoZMnHa10dctHzSqZbldufK6b-YiLH75fJD843Sun1xSLw7HowA$
>>> List archives at
>>> https://urldefense.com/v3/__http://webaim.org/discussion/archives__;!
>>> !C5qS4YX3!UxveBGs8EsEYgn5SoZMnHa10dctHzSqZbldufK6b-YiLH75fJD843Sun1x
>>> Q QEdBrrw$ >>
>> >> >> https://urldefense.com/v3/__http://list.webaim.org/__;!!C5qS4YX3!Uxve
>> B Gs8EsEYgn5SoZMnHa10dctHzSqZbldufK6b-YiLH75fJD843Sun1xSLw7HowA$
>> List archives at
>> https://urldefense.com/v3/__http://webaim.org/discussion/archives__;!!
>> C5qS4YX3!UxveBGs8EsEYgn5SoZMnHa10dctHzSqZbldufK6b-YiLH75fJD843Sun1xQQ
>> E dBrrw$ >>
>
>
> --
> Work hard. Have fun. Make history.
> > > 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$ > > > https://urldefense.com/v3/__http://list.webaim.org/__;!!C5qS4YX3!VduAd
> psRk8m9byQNuK0_8HxG8hyvuoB4sAa05knc9OdY73yJ7DwAgnzXVkrjCzrygQ$
> List archives at
> https://urldefense.com/v3/__http://webaim.org/discussion/archives__;!!
> C5qS4YX3!VduAdpsRk8m9byQNuK0_8HxG8hyvuoB4sAa05knc9OdY73yJ7DwAgnzXVkppw
> cdrhA$ >


--
Sailesh Panchang
Principal Accessibility Consultant
Deque Systems Inc
381 Elden Street, Suite 2000, Herndon,
VA 20170
Mobile: 571-344-1765