Techniques for WCAG 2.0

On this page:

-

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

## Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 1.3.1 (Info and Relationships)
  - How to Meet 1.3.1 (Info and Relationships)
  - Understanding Success Criterion 1.3.1 (Info and Relationships)
- Success Criterion 3.3.2 (Labels or Instructions)
  - How to Meet 3.3.2 (Labels or Instructions)
  - Understanding Success Criterion 3.3.2 (Labels or Instructions)

## Description

The objective of this technique is to provide a semantic grouping for related form controls. This allows users to understand the relationship of the controls and interact with the form more quickly and effectively.

Form controls can be grouped by enclosing them with the `fieldset` element. All controls within a given `fieldset` are then related. The first element inside the `fieldset` should be a `legend` element, which provides a label or instructions for the group. `Fieldsets` can be nested if desired, although this can lead to confusion if overdone.

Grouping controls is most important for related radio buttons and checkboxes. A set of radio buttons or checkboxes is related when they all submit values for a single named field. They work in the same way as selection lists, allowing the user to choose from a set of options, except selection lists are single controls while radio buttons and checkboxes are multiple controls. Because they are multiple controls, it is particularly important that they be grouped semantically so they can be more easily treated as a single control. Often, user agents will present the value of the `legend` before the label of each control, to remind users that they are part of the same group.

It can also be useful to group other sets of controls that are not as tightly related as sets of radio buttons and checkboxes. For instance, several fields that collect a user's address might be grouped together with a legend of "Address".

Authors sometimes avoid using the `fieldset` element because of the default display in the browser, which draws a border around the grouped controls. This visual grouping is also useful and authors should seriously consider retaining it (or some form of visual grouping). The visual effect can be modified in CSS by overriding the "border" property of the `fieldset` and the "position" property of the `legend`.

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.

Example Code:

    <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.

Example Code:

    <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>

### Example 3: Radio buttons submitting to the same named field

This example requests the user to choose a single philosopher. Note that each field has the same "`name`" attribute, indicating these radio buttons are related (they all submit the same field), and should be grouped as shown. Also note that while the "`name`" attributes are the same, the "`id`" attributes must be unique.

Example Code:

    <form action="http://example.com/vote" method="post">
      <fieldset>
        <legend>Your preferred philosopher</legend>
        <input type="radio" name="philosopher" id="philosopher_socrates" value="socrates"/>
        <label for="philosopher_socrates">Socrates</label>
        <input type="radio" name="philosopher" id="philosopher_plato" value="plato"/>
        <label for="philosopher_plato">Plato</label>
        <input type="radio" name="philosopher" id="philosopher_aristotle" value="aristotle"/>
        <label for="philosopher_aristotle">Aristotle</label>
      </fieldset>
      </form>

Note: Groups of related checkboxes work in the same way, except the user is allowed to express more than one preference for the field.

### Example 4: Logically related controls

In this example, form fields for residential and postal addresses are distinguished by the value of the `legend` in each `fieldset` grouping.

Example Code:

    <form action="http://example.com/adduser" method="post">
       <fieldset>
         <legend>Residential Address</legend>
         <label for="raddress">Address: </label>
         <input type="text" id="raddress" name="raddress" />
         <label for="rzip">Postal/Zip Code: </label>
         <input type="text" id="rzip" name="rzip" />
         ...more residential address information...
       </fieldset>
       <fieldset>
         <legend>Postal Address</legend>
         <label for="paddress">Address: </label>
         <input type="text" id="paddress" name="paddress" />
         <label for="pzip">Postal/Zip Code: </label>
         <input type="text" id="pzip" name="pzip" />
         ...more postal address information...
       </fieldset>
    </form>

## Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 Checkboxes

- Accessible Forms using WCAG 2.0

## Related Techniques

- H44: Using label elements to associate text labels with form controls
- H65: Using the title attribute to identify form controls when the label element cannot be used

## Tests

### Procedure

1. Check that groups of logically related input elements are contained within a fieldset element.

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

3. Check that each `fieldset` has a `legend` element that includes a description of that group.

### Expected Results

- All of the above checks are true.

- Top
- Contents
- Intro
- Previous: Technique H70
- Next: Technique H73