Grouped Form Controls with the Too-long Legend

Grouping form controls in a meaningful way can make them much easier to handle for everyone. While most controls can be grouped, some must be grouped. The fieldset/legend structure is available for exactly that – it can even be nested. And if its visual limitations are a problem, ARIA can be of help.

<fieldset>/<legend> structures are used for grouping form controls that are related in some way. While in complex forms they can be used to group all kinds of form controls, groups of radio buttons and checkboxes should always be grouped by them.

The more complex forms are, the more it makes sense to group thematically related form controls of any kind.

Regarding <fieldset>/<legend> structures, some screen readers are much wordier than others.

On one side, JAWS attaches the <legend>‘s text to the label of each contained form control. For a <legend> with the text “Personal Details” and two fields “First Name” and “Last Name”, it literally announces:

Personal Details, First Name. Personal Details, Last Name.

On the other side, NVDA only announces the <legend>‘s text when entering the <fieldset>. For the above example, it literally announces:

Personal Details, Grouping. First Name. Last Name.

Working Example

Explanation

By the way, it is not mandatory to group all your form controls. In the example above, you could easily drop the grouping of interests (or any other). In general: use groupings of thematically related controls whenever it feels meaningful to you and your users.

Code

<form>
  <fieldset>
    <legend>Please fill out the following inputs truthfully and completely. We will get back to you as soon as possible. Thank you for your effort.</legend>
    <div class="control">
      <label for="name">Full name</label><input id="name" type="text" />
    </div>
    <div class="control">
      <label for="biography">Biography</label><textarea id="biography"></textarea>
    </div>
    <div class="control">
      <label for="age_group">Age Group</label><select id="age_group">
        <option>
          0 to 9 Years
        </option>
        <option>
          10 to 19 Years
        </option>
        <option>
          20 to 29 Years
        </option>
        <option>
          30 to 39 Years
        </option>
        <option>
          40 to 49 Years
        </option>
        <option>
          50 to 59 Years
        </option>
        <option>
          60 to 69 Years
        </option>
        <option>
          70 to 79 Years
        </option>
        <option>
          80 to 89 Years
        </option>
        <option>
          90 to 99 Years
        </option>
      </select>
    </div>
  </fieldset>
</form>

.control, fieldset {
  margin: 6px 0;
}

label {
  display: inline-block;
  width: 120px;
  vertical-align: top;
}

input + label {
  width: auto;
}

NIL