WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Looking for an alternative to fieldset / legend

for

From: Vincent Young
Date: Sep 6, 2011 11:54PM

Everett,

As you pointed out, legend styling is a bit cumbersome, but wanted to
present a cross browser implementation for sake of clarity below:

http://www.webhipster.com/testing/accessibility/label/

This should look the same in all browsers... should. Of course, this has
simple styling and I'm sure Drupal is a different beast.

Best of luck.

- Vincent



On Tue, Sep 6, 2011 at 5:29 PM, E.J. Zufelt < <EMAIL REMOVED> > wrote:

> Hi Jared,
>
> Let me give that a try. I'm of course open to any suggestions others may
> have as well.
>
> We do use explicit for="id" on labels, I just simplified my example code.
>
> Thanks again,
> Everett Zufelt
> http://zufelt.ca
>
> Follow me on Twitter
> http://twitter.com/ezufelt
>
> View my LinkedIn Profile
> http://www.linkedin.com/in/ezufelt
>
>
>
> On 2011-09-06, at 10:46 AM, Jared Smith wrote:
>
> > You could use radiogroup and listbox ARIA roles with aria-labelledby
> > (example at http://webaim.org/presentations/2010/ahg/aria/radiogroup2),
> > but there's no current support that I'm aware of for these.
> >
> > So, I'd strongly recommend still using fieldset/legend, but hiding it
> > visually while providing a visual alternative. Something like...
> >
> > <fieldset>
> > <legend class="hidden">What is your birthdate?</legend>
> > <div class="legendtext">What is your birthdate?</div>
> > <label for="year">Year:</label> <input type="text" id="year">
> > ...
> > </fieldset>
> >
> > The fieldset must be hidden off-screen using CSS, NOT hidden using
> > display:none or visibility:hidden.
> >
> > The only weakness of this approach is that a screen reader user
> > reading linearly through the form would hear the "What is your
> > birthdate?" text one additional time. But, we've found this to rarely
> > be an issue because the forms are typically navigated using the tab
> > key from form control to form control. You could also give the visual
> > text a role of presentation, which may hide it from screen readers.
> >
> > This approach does not rely on ARIA, provides the native functionality
> > of the fieldset/legend, and has fewer shortcomings than your proposed
> > solution. I've seen is used very well on some very large, form-driven
> > web sites.
> >
> > Also, I hope you are recommending explicitly associated form labels
> > (using for/id) rather than implicit (label element contains the label
> > and the control). Explicit labelling is much more reliable and
> > bulletproof.
> >
> > Jared
> >