WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Looking for an alternative to fieldset / legend

for

From: Vincent Young
Date: Sep 14, 2011 12:21PM

I know this is an old bug, but wanted to make sure others are aware that in
certain browsers on touch devices when the label is touched, the associated
form field does not receive focus (forgot to mention this in a previous
post). Several possible solutions such as the following example:

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


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
> >