WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Looking for an alternative to fieldset / legend

for

From: E.J. Zufelt
Date: Sep 6, 2011 6:27PM

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
>