Grouping controls — fieldset and legend

When you come across a set of labeled radio buttons how does a user know the purpose of these controls?

There is a way to logically and visually group form controls (radio buttons, check boxes, etc.)

The Form

Empty my bank account:

Notice the visual grouping. Announces end of grouping.

This is an example of a long legend... Please! Empty my bank account! Really, I want you to take all of my money.

aria-labelledby alternative

Empty my bank account:


NO visual grouping, but could be created with CSS. This method would be useful for long legends! No announcement of end grouping, though that could be done via aria.

Digging Deeper - Grouping controls — WAI-ARIA & Non-Standard Form Controls

The HTML

<form action="">
<fieldset>
<legend>Empty my bank account:</legend>
<input name="radio1" type="radio" value="yes" id="radiobutton1" />
<label for="radiobutton1">Yes</label>
<br />
<input name="radio1" type="radio" value="no" id="radio1" />
<label for="radio1">No</label>
</fieldset>
</form>

...

<p id="faux-legend">Empty my bank account:</p>
<div role="group">
<input name="rb" type="radio" value="yes" id="r1" aria-labelledby="faux-legend yes-label"/>
<label for="r1" id="yes-label">Yes</label>
<br />
<input name="rb" type="radio" value="no" id="r2" aria-labelledby="faux-legend no-label"/>
<label for="r2" id="no-label">No</label>
</div>