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 7:36AM

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