WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Looking for an alternative to fieldset / legend

for

From: Jared Smith
Date: Sep 6, 2011 8:54AM

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