Web Accessibility at Iowa

Using fieldset and legend to organize related form controls

Techniques

Fieldset and Legend

Fieldset and legend tags make it easy to organize related controls logically. Fieldset creates a unifying container around a group of controls, while legend provides a textual identifier for that container. Grouping related controls makes it easier for AT users to understand the controls in context, and to move from group to group.

Fieldset and legend must always be used together.

Example:

<fieldset>
<legend>Which of the following seminars would you like to attend? (Select all that apply)</legend>
<div class="input-container">
<input type="checkbox" id="chk1" />
<label for="chk1">Early American Music</label>
</div>
<div class="input-container">
<input type="checkbox" id="chk2" />
<label for="chk2">Jazz and American Society</label>
</div>
<div class="input-container">
<input type="checkbox" id="chk3" />
<label for="chk3">Birth of the Blues</label>
</div>
<div class="input-container">
<input type="checkbox" id="chk4" />
<label for="chk4">The Roots of Country Music</label>
</div>
<div class="input-container">
<input type="checkbox" id="chk5" />
<label for="chk5">A History of Rock Music</label>
</div>
</fieldset>

View a form that uses fieldset and legend