Foundations: grouping forms with `<fieldset>` and `<legend>`

Posted on Friday, 31 January 2025 by Demelza Feltham in Design and development

In this post, we explore how to use the <fieldset> and <legend> elements to group and label form elements effectively, creating a more accessible and well-structured experience.

In addition to labelling text fields with <input> and <label> elements, implementing form validation and error messages effectively, accessible forms can be enhanced by using the <fieldset> and <legend> elements to create clear structure and meaningful grouping.

Much of a form's structure can be conveyed visually, whether through intentional spacing between sections or the use of bold text to highlight overarching questions paired with related controls. However, the visual grouping created by spacing should also be reflected in the markup. This can be done by using the <fieldset> and <legend> elements.

Accessible grouping benefits everyone, but in particular:

People with seeing disabilities who browse with a screen reader and braille display who rely on properly structured grouping to understand questions with multiple controls
People with seeing disabilities who use screen magnification benefit from structured grouping with semantic elements. These elements work alongside magnification tools to create a clear hierarchy, making it easier to navigate and reducing confusion when scrolling or zooming in on form sections.
People with thinking disabilities who rely on clearly structured and organised forms
People with moving disabilities who browse with a keyboard and rely on logical grouping of form controls which can streamline navigation for users who rely on assistive technologies like keyboard navigation or switch devices, reducing the effort required to interact with a form

The `<fieldset>` Element

The <fieldset> element serves a dual purpose, visually grouping related controls by default, with browsers typically adding an outline around the content it wraps. This visual style can be customised as needed. Additionally, it semantically conveys this grouping to assistive technologies, ensuring users can easily understand the relationship between the grouped controls.

Code sample:

<fieldset>
  <p>I am wrapped in fieldset</p>
</fieldset>

A thin outline of a fieldset surrounding the text that says I am wrapped in a fieldset — An example of a fieldset element showcasing the default visual outline generated by the markup.

It is important to note that a <fieldset> element (or any element with a role="group") will only be recognised as a group by assistive technologies if it has an accessible name. Without an accessible name, the group role will not be conveyed to people using a screen reader. For instance, in the above example of a <fieldset> without a <legend> or accessible name, it would not be exposed as a group by a screen reader to someone who is blind.

Typically, a <fieldset> element is used in conjunction with a <legend> element to provide a label and therefore, an accessible name, for the grouped section.

The `<legend>` Element

The <legend> labels the <fieldset>. This could take the form of a question. If a question is visually linked with inputs such as radio buttons or checkboxes, but not coded correctly, people relying on assistive technology like screen readers may not perceive the connection. A <legend> may also be a section heading that will provide context to the remainder of the <fieldset>, without having to clutter each individual form label:

Two forms appearing next to one another, one with the heading Delivery address, the other Billing address. Each form contains the following fields, Name, Street, City, Post code and a blue Submit button — An example of two identical forms, distinguished solely by the legend element at the top of each form.

When a user navigating a form with a screen reader enters a group defined by a <fieldset> containing a <legend>, the screen reader announces the <legend> to provide context for the controls within the group.

Common accessibility issues arise when <fieldset> and <legend> elements are omitted or incorrectly implemented. These errors are frequently observed during assessments and are typically recorded as 1.3.1 Info and Relationships failures, as they prevent assistive technologies from accurately conveying the grouping and relationships within the form, despite the information being presented to sighted users.

A common issue we find during accessibility assessments is when there is a visual label for a group of controls, but the association is not reflected in the markup. For example:

<p>Can you see the question</p>
<input type="checkbox" id="yes" name="agreement" value="yes">
<label for="yes">Yes</label>
</div>
<div>
<input type="checkbox" id="no" name="agreement" value="no">
<label for="no">No</label>

Someone that is blind and relying on a screen reader could initially perceive the on-screen content as follows:

Two checkboxes stacked vertically. One is labelled Yes and the other is labelled No — An example illustrating how two checkboxes without an associated legend in the markup might be perceived by someone navigating with a screen reader

By restructuring the <p> element to be a <legend>, and wrapping the entire contents within a <fieldset>, assistive technology users will be made aware of the context.

<form>
<fieldset>
<legend>Can you see the question?</legend>
<input type="checkbox" id="yes" name="agreement" value="yes">
<label for="yes">Yes</label>
</div>
<div>
<input type="checkbox" id="no" name="agreement" value="no">
<label for="no">No</label>
</fieldset>
</form>

A fieldset outline that contains two checkboxes that are vertically stacked. One is labelled Yes and one is labelled No. There is an overarching question that reads Can you see the question? — An example demonstrating how a properly marked-up fieldset and legend provide clear context to form controls.

Another common use case is when a form is divided into sections, such as when ordering a gift for someone and the delivery address differs from the billing address. While the same inputs (e.g., street, city, post code) may be used for both sections, grouping them with <fieldset> elements and providing a <legend> like "Delivery Address" and "Billing Address" ensures clear context and group labelling. This allows users to distinguish between the sections, even if the individual input labels are identical.

Changing the experience for screen readers users from this:

Two form fields appearing next to one another. Each form contains the following fields, Name, Street, City, Post code and a blue Submit button — An example illustrating how two identical forms may be perceived without a legend to differentiate their fieldset groups.

To this:

Two form fields appearing next to one another, one with the heading Delivery address, the other Billing address. Each form contains the following fields, Name, Street, City, Post code and a blue Submit button — An example of two identical forms, distinguished solely by the legend element at the top of each form.

Technical considering for `<fieldset>` and `<legend>`

`<legend>` as first child

For a <legend> to function as intended serving as a label for the group defined by the <fieldset> it must be the first child of the <fieldset>. This means no elements can appear between the opening <fieldset> element and the <legend> element. Placing any element between the two disrupts their semantic relationship, causing the <legend> to no longer be recognised as the label for the group. As a result, assistive technologies cannot convey the relationship between the grouped elements and their label, reducing the accessibility of the form.

If hints or instructions need to precede the controls, they should be placed after the <legend> within the <fieldset>. Alternatively, ARIA attributes can be used to provide the necessary grouping and labelling, which is discussed in more detail later.

Headings as `<legend>` elements

Previously, the HTML specification did not allow headings to also function as <legend> elements, but this has since changed and headings can now be wrapped within a <legend>. For example,

<legend>
<h2>Your order details</h2>
</legend>

Using ARIA Instead of `<fieldset>` and `<legend>`

In some cases, grouping and labelling may not be achievable with HTML semantics, requiring the use of ARIA instead. This might occur when a <legend> cannot be the first child of a <fieldset> or when existing content on the page is being referenced as a label for the group.

Regardless of the approach, a defined group and its corresponding label are essential to ensure accessible grouping and labelling. While you can now wrap a heading within a <legend>, it’s also possible to use a heading (or any other element) outside of a <fieldset> to label the group. To do this, assign an id to the heading or other element, and reference it with the <fieldset> using the aria-labelledby attribute. This approach allows the heading to serve as the label for the <fieldset> group.

For example:

<h2 id="contactDetails">Your contact details</h2>
<fieldset aria-labelledby="contactDetails">
…
</fieldset>

If the <legend> cannot be placed as the first child of a <fieldset>, the semantic relationship between the two elements is disrupted. In such cases, adding role="group" to the <fieldset> can help convey the intended grouping to assistive technologies. However, note that the visual outline typically provided by the <fieldset> will not be displayed. To add a label to the group, assign an id to the element that will act as a label and reference it with aria-labelledby on the grouping element. This ensures assistive technologies recognise the group and its label.

For example:

<div role="group" aria-labelledby="group-label">
<p>*Only select one option</p>
<p id="group-label">Please select your preferences:</p>
<div> <input type="checkbox" id="option1"> 
<label for="option1">Option 1</label> </div>
<div> <input type="checkbox" id="option2"> 
<label for="option2">Option 2</label> 
</div> </div>

Using the <fieldset> and <legend> elements is an effective way to improve form accessibility and usability. These elements ensure that visual structure is conveyed to assistive technologies, benefiting a broad range of users. By implementing them thoughtfully, you create forms that are both visually organised and semantically structured.

Summary

Group related controls using <fieldset> and label them with <legend> to provide clear context for users, especially those relying on assistive technologies.
Ensure the <legend> is the first child of the <fieldset> to preserve the semantic relationship.
Leverage ARIA when needed. If <fieldset> and <legend> cannot be used, apply role="group" and aria-labelledby for semantic grouping.
Use a <legend> for overarching context instead of repeating similar labels for every control.
If the default <fieldset> appearance doesn't fit your design, use CSS to customise its visual style while retaining accessibility.

More information

1.3.1 Info and Relationships (A)
Fieldsets, legends and screen readers again, Steve Faulkner
Using the fieldset and legend elements, Léonie Watson

Next steps

Read more accessibility foundations posts, our WCAG primer or find out more about how our assessments can help you identify issues in your websites, mobile applications, design systems, and other products and services.

The <fieldset> Element

The <legend> Element

Technical considering for <fieldset> and <legend>

<legend> as first child

Headings as <legend> elements

Using ARIA Instead of <fieldset> and <legend>