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 4:00PM

Thanks for throwing this out there James. Not sure it would work in this
case with a platform like Drupal that has such a large market. I can only
test on a limited number of screen reader/browser combinations at work and
so far not getting the results I think Drupal requires.


On Tue, Sep 6, 2011 at 11:40 AM, James Nurthen < <EMAIL REMOVED> > wrote:

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