Grouping Controls

Status: This is an in-progress, unapproved draft.

Grouping related form controls makes forms more understandable for all users. Group them both visually and within the code. Use the <fieldset> and <legend> elements to associate related form controls.

The <fieldset> element provides a container for related form elements, and the <legend> element acts like a heading to identify the group. In the example below there are three checkboxes that are all part of an opt-in function for receiving different types of information. The legend for this group of controls highlights the action that is common to all controls, and the fact that they are all optional.

Example:
(Optional) I want to receive
Code snippet: 
<fieldset>
<legend>(Optional) I want to receive</legend>
  <div>
    <input type="checkbox" name="newsletter" id="check_1">
    <label for="check_1">The weekly newsletter</label>
  </div>
  <div>
    <input type="checkbox" name="company_offers" id="check_2">
    <label for="check_2">Offers from the company</label>
  </div>
  <div>
    <input type="checkbox" name="assoc_offers" id="check_3">
    <label for="check_3">Offers from associated companies</label>
  </div>
</fieldset>

Note: Depending on the configuration, some screen readers read out the legend either with every form element, once, or, rarely, not at all. To accommodate this consider the following:

  • Make the legend as short as possible for situations in which it is read together with the label each time.
  • Make the individual labels sufficiently self-explanatory for situations in which legends are not read aloud, without repeating the legend in every label.

Success Criteria:

Techniques: