HTML and XHTML
This technique relates to:
The objective of this technique is to associate a description (such as a prompt or
question) with a related group of radio buttons or checkboxes using the
fieldset and legend elements. Generally, a set of radio buttons or
checkboxes is related when they share the same value for the name attribute.
Using fieldset and legend to associate a description with a group of
form controls creates a programmatic association between the description and the group
of form controls. This makes it possible for people using screen readers to hear the
description as well as the available responses.
When a small group of related radio buttons includes clear instructions and distinct selections it may not be necessary to use fieldsets and legends; H44: Using label elements to associate text labels with form controls, may also be sufficient.
This example shows a test item with one question and five possible answers. Each
answer is represented by a radio button (input type="radio"). The radio
buttons are contained within a fieldset. The test question is tagged
with the legend element.
<fieldset> <legend>The play <cite>Hamlet</cite> was written by:</legend> <input type="radio" id="shakesp" name="hamlet" checked="checked" value="a"> <label for="shakesp">William Shakespeare</label><br /> <input type="radio" id="kipling" name="hamlet" value="b"> <label for="kipling">Rudyard Kipling</label><br /> <input type="radio" id="gbshaw" name="hamlet" value="c"> <label for="gbshaw">George Bernard Shaw</label><br /> <input type="radio" id="hem" name="hamlet" value="d"> <label for="hem">Ernest Hemingway</label><br /> <input type="radio" id="dickens" name="hamlet" value="e"> <label for="dickens">Charles Dickens</label> </fieldset>
The User Profile page for a Web site allows users to indicate their interests by
selecting multiple checkboxes. Each checkbox (input type="checkbox")
has a label. The checkboxes are contained within a
fieldset, and the legend element contains the prompt for
the entire group of checkboxes.
<fieldset> <legend>I am interested in the following (check all that apply):</legend> <input type="checkbox" id="photo" name="interests" value="ph"> <label for="photo">Photography</label><br /> <input type="checkbox" id="watercol" name="interests" checked="checked" value="wa"> <label for="watercol">Watercolor</label><br /> <input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac"> <label for="acrylic">Acrylic</label> … </fieldset>
Resources are for information purposes only, no endorsement implied.
HTML 4.01 Checkboxes
Check that any group of input elements of type="radio"
or type="checkbox" with the same name attribute is
contained within a fieldset element
Check that each fieldset has a legend element
Checks #1 and #2 are true.