WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: SPAM-LOW: Re: Looking for an alternative to fieldset / legend

for

From: Dawn Budge
Date: Sep 6, 2011 8:39AM

For restyling legends and fieldsets, check out the CSS reset within HTML5
Boilerplate, it will be included in there.


Otherwise you'd be taking a heavy semantic loss for a few pixels of layout
in 2 old browsers with <10% share (unless you are in China, which is where
most of IE6's users are these days)

----------------------------------------

From: "Vincent Young" < <EMAIL REMOVED> >

Sent: 06 September 2011 14:39

To: "WebAIM Discussion List" < <EMAIL REMOVED> >

Subject: SPAM-LOW: 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

> >

> >

> >

> >