WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Looking for an alternative to fieldset / legend

for

From: James Nurthen
Date: Sep 6, 2011 12:39PM

Can't you use role="group" for this?

<div role="group" aria-labelledby="date-legend">
<div id="date-legend">What is your birthdate?</div>
<label for="year">Year: </label><input id="year" type="text">
<label for="month">Month: </label><input id="month" type="text">
<label for="day">Day: </label><input id="Day" type="text">
</div>



On Tue, Sep 6, 2011 at 09:12, Vincent Young < <EMAIL REMOVED> > wrote:

> I'd just css hack it. I've always been ok with not having the cleanest css
> if semantics are at stake. This has always been one such case for me.
> On Sep 6, 2011 7:52 AM, "Jared Smith" < <EMAIL REMOVED> > 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
> >