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

Tags: Assistive Technology, Code, Foundations, WCAG

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>

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:

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>
<div>
  <input type="radio" id="yes" name="agreement" value="yes">
  <label for="yes">Yes</label>
</div>

<div>
  <input type="radio" id="no" name="agreement" value="no">
  <label for="no">No</label>
</div>

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

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>
    
    <div>
      <input type="radio" id="yes" name="agreement" value="yes">
      <label for="yes">Yes</label>
    </div>
    
    <div>
      <input type="radio" id="no" name="agreement" value="no">
      <label for="no">No</label>
    </div>
    
  </fieldset>
</form>

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:

To this:

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" (or in the case of a group of radio buttons, role="radiogroup") to the grouping element 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 id="group-label">Please select your preferences:</p>
  <div>
    <input type="checkbox" id="checkbox1" name="option1">
    <label for="checkbox1">Option 1</label>
  </div>
  <div>
    <input type="checkbox" id="checkbox2" name="option2">
    <label for="checkbox2">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" (or in the case of a group of radio buttons, role="radiogroup") 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 or sign up for Accessibility Unlocked, our free six-day newsletter series designed to help you kick-start accessibility.

Updated 13 June, 2025