Headings Mixed into a Form as Children of Legends

It sometimes feels necessary to group complex forms visually using headings. As traditionally used headings are non-focusable elements, you have to make sure that they are not missed by screen reader users in focus mode.

Although it is the traditional way to group form controls using <fieldset>/<legend> structures (and they are even capable of being nested), sometimes there is the need to use headings within forms. But those headings are not announced in focus mode by default.

The good news: since HTML 5.2, headings are allowed within <legend> elements, see The legend element (W3.org).

Working Example

Tell us something about you

Please fill out the following form.

General information

Gender

Additional information

Explanation

By the way, the other way round (placing legends into headings) does not work, because a <legend> always has to be the first child of its <fieldset>.

Although it is possible to mix headings into forms, you should be careful with that. For example, when a heading is announced as part of a <fieldset>‘s <legend>, it’s level (<h1>, <h2>, etc.) is omitted, which then could lead to confusion.

So in general, try to keep your forms as easy as possible. It often is better to split a complex form into different steps than display it on one single page.

Code

<h1>
  Tell us something about you
</h1>
<p>
  Please fill out the following form.
</p>
<form>
  <fieldset>
    <legend>
      <h2>
        General information
      </h2>
    </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>
    <fieldset>
      <legend>Gender</legend>
      <div class="control">
        <input id="gender_male" name="gender" type="radio" /><label for="gender_male">Male</label>
      </div>
      <div class="control">
        <input id="gender_female" name="gender" type="radio" /><label for="gender_female">Female</label>
      </div>
    </fieldset>
  </fieldset>
  <fieldset>
    <legend>
      <h2>
        Additional information
      </h2>
    </legend>
    <div class="control">
      <label for="idol">Idol</label><select id="idol" size="2">
        <option>
          Michael Jackson
        </option>
        <option>
          Jesus
        </option>
        <option>
          Mahatma Gandhi
        </option>
        <option>
          John Doe
        </option>
      </select>
    </div>
    <div class="control">
      <label for="favourite_car">Favourite Car</label><select id="favourite_car"><optgroup label="Swedish Cars">
          <option>
            Volvo
          </option>
          <option>
            Saab
          </option>
        </optgroup><optgroup label="German Cars">
          <option>
            Mercedes
          </option>
          <option>
            Audi
          </option>
        </optgroup></select>
    </div>
    <div class="control">
      <input id="accept_agbs" type="checkbox" /><label for="accept_agbs">I accept the terms and conditions</label>
    </div>
    <div class="control">
      <input type="submit" value="Register" />
    </div>
  </fieldset>
</form>
.control, fieldset {
  margin: 6px 0;
}

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

input + label {
  width: auto;
}
NIL