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 1:45AM

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