WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Are fieldset and legend still relevant?


From: Birkir R. Gunnarsson
Date: Dec 30, 2014 8:40AM

Hey guys

Joy, well said.
For the examples, at a glance.
Yes, the labeling in examples 2 and 3 works, and I would pass it.
However it has three drawbacks.
- Using aria-labelledby rather than the html labeling decreases the
clickable area of the radiobuttons (for users with dexterity
impairments larger clickable area is always a plus). When using label
for user can click on the label and focus moves into its associated
radiobutton. With aria-labeling this does not happen.

- Fielset/legend construct usually draws a visual box around the
legend and choices, which is good for users with cognitive
impairments. using ARIA group role does not do this, nor the aria
labeling, .. though the page designer can always create these types of
things using CSS anyway.

- this set up will force screen readers to read legend for every
single radiobutton choice, which can get very annoying when the legend
is very wrong.
Using fieldset/legend or corresponding ARIA group role users can
customize, at least to some degree, how often they want to hear the
I only want to hear it once, when focus moves into the radiobuttons.
I have not looked at Survey Monkey lately, but it used to drive me
bananas, apples and pairs, to try and take their surveys, because the
bloody question (and instructions sometimes) was read out in its
entirety before the label of any radiobutton choice.
Again, I do not know what they used there, I would have to go back,
check, and hope they have replaced whatever structure they used.

So, again, your way is not wrong, I would not fail it, but it has some
drawbacks that I would point out if I were doing an accessibility
assessment of the page, at least best practice items to discuss, not
outright violations.
Note though that I only took a quick look, it is one of those crazy
days at work, so I have not had time to analyze the code in any depth.


On 12/30/14, Thomas McKeithan II < <EMAIL REMOVED> > wrote:
> I concur with Joy. We should determine conformance to the standards basd
> upon how the page is coded and not how a specific AT Tool behavors. For
> years I've advocated fot testing using AT Tools with the "out of the Box"
> settings rather than customizations.
> Respectfully,
> Thomas Lee McKeithan II
> http://www.qssinc.com
> 508 SME, SSQA Solutions Center
> 10480 Little Patuxent Pkwy , Suite 350
> Columbia , MD 21044
> (301 )977-7884 x1058 (Work)
> (202) 276-6437 (Cell)
> This electronic mail (including any attachments) may contain information
> that is privileged, confidential, and/or otherwise protected from disclosure
> to anyone other than its intended recipient(s). Any dissemination or use of
> this electronic email or its contents (including any attachments) by persons
> other than the intended recipient(s) is strictly prohibited. If you have
> received this message in error, please notify the sender by reply email and
> delete the original message (including any attachments) in its entirety.
> -----Original Message-----
> [mailto: <EMAIL REMOVED> ] On Behalf Of Lynn Holdsworth
> Sent: Tuesday, December 30, 2014 8:21 AM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Are fieldset and legend still relevant?
> Hi Joy,
> Thanks for your comments and the good points you make.
> I believe the user is King and we should do everything possible to get as
> close to total inclusivity as we can.
> I take your point that it's frustrating to have to code for one group of
> users whose AT is set to a particular setting. But I would guess that a
> significant enough number of people are using JAWS with intermediate or
> advanced verbosity settings to make that bit of extra effort worthwhile.
> Does the WebAIM survey collect data on verbosity settings? If not it might
> be worth considering this for next year's survey.
> Thanks, Lynn
> On 30/12/2014, Lynn Holdsworth < <EMAIL REMOVED> > wrote:
>> Hi Birkir,
>> Sorry, I should have made myself clearer. I'm not advocating using
>> invisible labels, but rather using ARIA-LABELLEDBY to associate a form
>> field with a piece of text that's visible somewhere appropriate on the
>> page.
>> I've knocked up some examples. With JAWS 15 set to advanced verbosity,
>> the second and third examples work beautifully, while in the first the
>> "Gender" label is ignored.
>> http://behindtheyellowline.org.uk/labelledby.htm
>> (Excuse any validation errors - quick turn-around time and all that!)
>> I'll try these with NVDA and VoiceOver when I get a moment, and may
>> create some more complex examples to illustrate what I'm trying to
>> achieve.
>> But for now, would fieldset and legend alone cover WCAG2?
>> Thanks, Lynn
>> On 30/12/2014, Birkir R. Gunnarsson < <EMAIL REMOVED> > wrote:
>>> Hi Lynn
>>> It depends how you construct the aria-label I would say.
>>> The relevant pieces of info user needs to ahve access to are the
>>> labels for the individual fields as well as the common label for the
>>> group of fields.
>>> How would you code a gender radiobutton set for instance?
>>> User would want to hear
>>> "gender male"
>>> "gender female"
>>> or at least hear the word "gender" on the first radiobutton, the one
>>> that has focus, right?
>>> Generally I would recommend fieldset with legend "gender" and two
>>> radiobuttons labeled "male" and "female".
>>> If for whatever reason that is not possible I would just construct an
>>> aria group.
>>> <div role="group" aria-labelledby="gender">
>>> <h3 id="gender">Gender</h3>
>>> <label for "gm">Male</label>
>>> <input type="radio" name="rbgender" id="gm"> <label for
>>> "gm=f">Female</label> <input type="radio" name="rbgender" id="gf">
>>> </div>
>>> You could construct an aria-label and add the legend text to one or
>>> more of the radiobuttons.
>>> It would communicate the same info.
>>> The risk with aria-labels in general is that they are invisible and I
>>> often see developers being sloppy and making typos that do not get
>>> caught by their QA teams.
>>> I think the Jaws setting is honestly a bit weird.
>>> Users can be extra super power users with Jaws, but they still cannot
>>> guess what a common legend for a fieldset or a tooltip is on a page
>>> (aria-describedby values are not read by Jaws with verbosity set to
>>> "advanced").
>>> The verbosity setting is not even set for the browser specifically,
>>> it is the global setting.
>>> I think FS should fix this.
>>> I digress. ;)
>>> In short, yes, fieldset/legends are still important to me, though
>>> there are ways one could work around it and code the legend into the
>>> labels.
>>> Cheers
>>> On 12/30/14, Lynn Holdsworth < <EMAIL REMOVED> > wrote:
>>>> Hi all,
>>>> I'm just going through WebAIM's invaluable list of checkpoints, and
>>>> found this one under 1.3.1: Info and relationships:
>>>> * Text labels are associated with form input elements. Related form
>>>> elements are grouped with fieldset/legend.
>>>> Rather than using fieldset and legend to group form elements, for a
>>>> while now I've been using CSS and ARIA labels.
>>>> Fieldsets were always pretty flaky with screenreaders. I have my
>>>> JAWS setting set to advanced, and so legends don't get read out as I
>>>> tab through the elements inside a fieldset. But ARIA labels do. And
>>>> they get read out in the order that the developer deems most sensible.
>>>> If I use both legends and ARIA labels, some users must listen to the
>>>> labels twice, sometimes once before and once after the info about
>>>> the element with focus, which could get pretty confusing for beginners.
>>>> I'd love to hear your thoughts on this one.
>>>> Cheers, Lynn
>>>> >>>> >>>> list messages to <EMAIL REMOVED>
>>> --
>>> Work hard. Have fun. Make history.
>>> >>> >>> list messages to <EMAIL REMOVED>
> > > messages to <EMAIL REMOVED>
> > > >

Work hard. Have fun. Make history.