Form Field Grouping

Form field grouping consists of associating related controls in HTML code using fieldset and legend elements. This semantic grouping allows screen readers to announce the common context of the fields (for example, "Delivery Address") before each field in the group. Without it, identical labels like "First Name" or "Postal Code" become ambiguous.

A booking form requests contact information for two travelers. Each section contains a "First Name" field and a "Last Name" field. A screen reader user reaches the second "First Name": it's impossible to know whether it concerns traveler 1 or traveler 2. Form field grouping resolves this ambiguity by associating related controls in HTML code.

#How to group fields

The <fieldset> and <legend> elements form the native mechanism. The <fieldset> delimits the group, the <legend> gives it a title. Screen readers announce this title before each field in the group.

<fieldset>
  <legend>Traveler 1</legend>
  <label for="firstname-1">First Name</label>
  <input id="firstname-1" type="text">
  <label for="lastname-1">Last Name</label>
  <input id="lastname-1" type="text">
</fieldset>

The W3C WAI Forms tutorial and technique H71 describe this approach. It satisfies the WCAG criterion 1.3.1 Info and Relationships (level A). The RGAA repeats this requirement in its criteria 11.5 and 11.6: fields of the same nature must be grouped, and the legend must be pertinent.

A detail many ignore: the <legend> must be the first child of the <fieldset>. Placed elsewhere, some screen readers do not render it.

Not all field groups require a <fieldset>. Radio buttons and checkboxes require it systematically. For text fields, AcceDe Web recommends grouping when identical labels appear in multiple sections of the form.

The native style of <fieldset> (border, padding) sometimes complicates layout. The alternative: role="group" with aria-labelledby, documented on MDN. Native HTML first, ARIA as a fallback.

#The two classic mistakes

Not grouping radio buttons. The most common case. Without <fieldset>, a screen reader announces "Yes, radio button" without context. The user doesn't know what question they're answering.

<!-- ❌ Screen reader says "Yes" without context -->
<label><input type="radio" name="conditions"> Yes</label>
<label><input type="radio" name="conditions"> No</label>
 
<!-- ✅ Screen reader says "Do you accept the Terms of Sale? Yes" -->
<fieldset>
  <legend>Do you accept the Terms of Sale?</legend>
  <label><input type="radio" name="conditions"> Yes</label>
  <label><input type="radio" name="conditions"> No</label>
</fieldset>

Wrapping the entire form in a single <fieldset>. A single group containing all fields provides no information. Grouping makes sense only to distinguish subsets, such as contact information and delivery address.

#In summary

Use <fieldset> and <legend> whenever fields share a common context, and systematically for radio buttons and checkboxes. The <legend> comes first child, always. If the form contains only a single logical group, grouping is not necessary.