WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Looking for an alternative to fieldset / legend

for

From: Bryan Garaventa
Date: Sep 6, 2011 8:21AM

True, which is why Fieldsets and Legends are the prefered methods for
ensuring the accessibility of complex form field groupings despite visual
rendering.

One other solution is to use screen reader accessible hidden text within the
Label tag for each form field, front loading the legend text, which wouldn't
appear visually. This may duplicate the screen text, which some might find
confusing however.

Bryan Garaventa
www.WhatSock.com

----- Original Message -----
From: "Vincent Young" < <EMAIL REMOVED> >
To: "WebAIM Discussion List" < <EMAIL REMOVED> >
Sent: Tuesday, September 06, 2011 6:38 AM
Subject: Re: [WebAIM] Looking for an alternative to fieldset / legend


>> You wouldn't be able to use a
>> Label with matching ID at the same time of course, and mouse users would
> see
>> the label when hovering over the field, but these are the only drawbacks.
>
> The other drawback is that a larger click area is no longer provided when
> you remove the associated label.
>
> On Tue, Sep 6, 2011 at 12:45 AM, Bryan Garaventa <
> <EMAIL REMOVED> > wrote:
>
>> Have you considered using Title attributes for this purpose instead?
>> If it's not possible to use Fieldset and Legends, this is the most cross
>> browser / AT compatible solution that I can think of, which will always
>> work. For example, if you front load the text that you would initially
>> want
>> as the Legend text at the beginning of the Title attribute text, then
>> follow
>> it with the desired label text for the form field, then you will have
>> both
>> reliably announced as part of the same label. You wouldn't be able to use
>> a
>> Label with matching ID at the same time of course, and mouse users would
>> see
>> the label when hovering over the field, but these are the only drawbacks.
>>
>> Bryan Garaventa
>> www.WhatSock.com
>>
>>
>> ----- Original Message -----
>> From: "E.J. Zufelt" < <EMAIL REMOVED> >
>> To: "WebAIM Discussion List" < <EMAIL REMOVED> >
>> Sent: Monday, September 05, 2011 11:56 PM
>> Subject: [WebAIM] Looking for an alternative to fieldset / legend
>>
>>
>> > Good evening,
>> >
>> > We are looking at implementing proper grouping for compound UI controls
>> in
>> > Drupal 8. Namely we have radios, checkboxes, and date controls that are
>> > a
>> > collection of input elements. First thought is use the common fieldset
>> > /
>> > legend elements to wrap and provide context to the controls, and
>> > information to the accessibility API.
>> >
>> > This, however, is not a dsirable solution, as browsers have never
>> > styled
>> > these elements consistently or in any way that makes one not want to
>> throw
>> > up. Using a CSS reset is an options, but from what I know there are no
>> > fieldset / legend resets that work well cross browser.
>> >
>> > I thought of using:
>> >
>> > <div>
>> > <div id="date-legend" class="legend">What is your birthdate?</div>
>> > <label>Year: <input type="text" aria-describedby="date-legend"></label>
>> > <label>Month: <input type="text"
>> > aria-describedby="date-legend"></label>
>> > <label><input type="text" aria-describedby="date-legend"></label>
>> > </div>
>> >
>> > This causes three problems.
>> >
>> > 1. AT reads label / description, so this would be read "Year. What is
>> your
>> > birthday?"
>> > 2. The legend would be read for every element in the group.
>> > 3. I am philosophically opposed to using aria when a native semantic
>> > component exists, especially when it is supported by older technology.
>> > *
>> > Note that this objection is lessened by the realization that the native
>> > elements available don't work if they cannot be properly styled,
>> > considering that the UI components are used on millions of sites with
>> > varied style requirements.
>> >
>> > Any suggestions or creative solutions welcomed.
>> >
>> > Thanks,
>> > 2.
>> >
>> > Everett Zufelt
>> > http://zufelt.ca
>> >
>> > Follow me on Twitter
>> > http://twitter.com/ezufelt
>> >
>> > View my LinkedIn Profile
>> > http://www.linkedin.com/in/ezufelt
>> >
>> >
>> >
>> >