WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Are fieldset and legend still relevant?

for

From: Lynn Holdsworth
Date: Dec 30, 2014 6:13AM

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
>> >> >> >>
>
>
> --
> Work hard. Have fun. Make history.
> > > >