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: Sailesh Panchang
Date: Aug 13, 2021 10:52AM

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!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.
> > > https://urldefense.com/v3/__http://list.webaim.org/__;!!C5qS4YX3!UxveBGs8EsEYgn5SoZMnHa10dctHzSqZbldufK6b-YiLH75fJD843Sun1xSLw7HowA$
> List archives at
> https://urldefense.com/v3/__http://webaim.org/discussion/archives__;!!C5qS4YX3!UxveBGs8EsEYgn5SoZMnHa10dctHzSqZbldufK6b-YiLH75fJD843Sun1xQQEdBrrw$
> > > > > >


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