Wrapping a label element within a legend element

Question

I've never had a reason to put a label element inside of a legend element (never really thought about it or seen it done). But with the design I'm implementing, it's tempting to do so.

Here's what I'm tempted to do:

<fieldset>
<legend><label for="formInfo">I would like information on</label></legend>
<select id="formInfo">
 <option value="Cats">Cats</option>
 <option value="Dogs">Dogs</option>
 <option value="Lolz">Lolz</option>
</select>
</fieldset>

It works as expected (clicking the label focuses the corresponding input) in Firefox3, Safari, Opera, and IE6/7 and it passes validation, but I'm just wondering if there are any known reasons (accessibility? semantics? browser issues) why this shouldn't be done

Answer 1

well, the label element itself seems fine - it's the description of the "formInfo" element, so that's no worries. Semantically, however, what's this saying about the legend element? It's supposed to be a caption for the entire fieldset....

Answer 2

Where is your </fieldset>?

Semantically, legend describes a fieldset, just as label describes a single field.

Fieldsets are supposed to be used to group together semantically related fields (for instance, an "address" fieldset might have input fields for street, city and country).

Assuming you have more than one field in the fieldset, then doing what you suggest doesn't semantically make sense -- you need to create separate legend text that describes the fieldset, then a label for each field.

If you only have one field, then you don't need fieldset or legend at all.

So, basically, you shouldn't do what you're doing.

If you're doing it to have extra elements to attach CSS rules or Javascript events to, you're better off using generic elements like div and span that won't confuse text-to-speech and other non-visual user agents.

i.e., putting in a div or span is effectively neutral in terms of accessibility/semantics (it implies nothing) versus misusing a semantic element (even if only slightly, as in this case), which is potentially misleading. Imagine even the best-case scenario for your layout in a text-to-speech browser: The text is read aloud twice, once as legend and once as label -- why would someone want the phrase "I would like information on" read aloud twice to them? Especially as it only makes sense in the context of the choices in the select control.