Description with a fieldset

Radio buttons, checkboxes, and other groups of related fields (like addresses) can be grouped in fieldsets. The question or the subject will be the legend. Place the description below the legend just above the first label/form field. The description is linked to the fieldset element with aria-describedby.

Example

Screenshot of a fieldset, with a legend and 2 radio buttons

In HTML, simplified

<fieldset aria-describedby="description-log-in">
  <legend>Do you want to log in?</legend>
  <p id="description-log-in">
      When you log in, your details are already filled in, and we can help you faster.
  </p>
    <input
      id="log-in-yes"
      type="radio"
      name="log-in"
      value="yes"
    />
    <label for="log-in-yes">Yes</label>

    <input
      id="log-in-no"
      type="radio"
      name="log-in"
      value="no"
    />
    <label for="log-in-no">No</label>

</fieldset>

Examples

Connect a description to the form field, using aria-describedby.

<label for="new-password">New password</label>
<p id="description-new-password">
    Choose a password of at least 8 characters long.
</p>
<input
  id="new-password"
  type="password"
  name="new-password"
  aria-describedby="description-new-password"
  autocomplete="new-password"
/>

WCAG Success Criteria for descriptions

A description is optional, but it can help users to understand better what they need to fill out. Then a description with a fieldset is necessary to meet the WCAG success criterion 3.3.2 Labels or Instructions (Level AA).

Resources

View this page on GitHub