WebAIM - Web Accessibility In Mind

E-mail List Archives

Looking for an alternative to fieldset / legend

for

From: E.J. Zufelt
Date: Sep 6, 2011 12:57AM

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