Techniques for WCAG 2.0

Skip to Content (Press Enter)

This document is a draft, and is designed to show changes from a previous version. It is presently showing added text, changed text, deleted text, [start]/[end] markers, and Issue Numbers.

Hide All Edits   |   Toggle Deletions  |   Toggle Issue Numbers   |   Toggle [start]/[end] Markers   |   Show All Edits

Changes are displayed as follows:

-

H71: Providing a description for groups of form controls using fieldset and legend elements

Applicability

HTML and XHTML

This technique relates to:

Description

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.

Examples

Example 1: A multiple choice test

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>   

Example 2: A set of checkboxes

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

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

  1. Check that any group of input elements of type="radio" or type="checkbox" with the same name attribute is contained within a fieldset element

  2. Check that each fieldset has a legend element

Expected Results