How to Group Related Form Fields for Accessibility

When designing accessible forms, it’s important to group related fields in a way that is accessible to all users. Form controls that are related should be grouped to make the form more understandable. This is primarily for the benefit of screen reader users.

We’re usually talking here about checkboxes and radio buttons, but sometimes we will want to group input text fields as well. 

How do you Make Form Labels Accessible? 

In order to make form labels on websites accessible, you can use any of the following methods:

  • Fieldset and Legend Elements
  • ARIA
  • Select Element
  • Optgroup Element

Let’s review how and why to use each method.

Fieldset and Legend Elements

One method of grouping is to use the <fieldset> and <legend> elements. In the default styling the <fieldset> element shows a box around the group and the <legend> is a title that sits on the top of the box.

Here’s the code for the radio buttons. The <fieldset> wraps round all the controls, and the <legend> must always be the first child element of the <fieldset>. If it’s not, the relationship between the two will not be communicated properly by assistive technologies.

The code for multiple checkboxes is very similar. One point to remember is that if you happen to use a single checkbox in a form, such as a checkbox for accepting terms and conditions, it doesn’t need to be grouped.

If you don’t like the appearance of the <fieldset> and <legend>, you can change it with CSS. In this CodePen, the <legend> is styled to be inside the <fieldset> box. Just be aware that this particular color combination is not accessible!

HTML 5.2 permits the use of headings within the <legend> tag. You can see this in this example from the Gov.UK Design System. One advantage of using a heading is that a screen reader user can jump directly to a heading within a page.

Here’s an example of <fieldset> and <legend> in the wild: In Lush’s checkout form, there is a fieldset around the delivery method options, with the legend saying: Choose a delivery method.

Another example is this wildlife quiz. Each set of answers is a set of radio buttons within a <fieldset>, with the question as the <legend>.

This fashion survey uses a <fieldset> and <legend> for many of the questions. It also uses checkboxes for some questions which are styled to look like buttons.

One problem with this form is that some of the questions should really use radio buttons rather than checkboxes. This is because it’s possible for a user to select multiple answers with checkboxes, which doesn’t make sense for a question like “How often do you typically purchase new clothes or accessories?”

A section called shopping habits shows a field called "how often do you typically purchase new clothes or accessories?" and it shows frequency options as buttons

If you change the input type of these checkboxes to radio buttons, the form only allows one choice for the question, but the inputs would need to be restyled to look like radio buttons.

The WordPress Gravity Forms plugin adds fieldsets and legends automatically for checkboxes and radio buttons.

The same plugin also groups related fields such as Name, Email and Address with <fieldset> and <legend>.

The WPForms WordPress plugin creates a <fieldset> and <legend> for grouped controls as well.

ARIA Method

Another method for grouping form fields is to use ARIA. To do this, you wrap the related fields in a <div> with the group ARIA role, and use the aria-labelledby property to label this group for a screen reader user. 

In this example, the four fields form an address.

An example online of this usage of ARIA is in this quiz on hair color. Each panel of hair colors is actually a radio button, styled to look very different from a typical radio button. The <div> with the grid of four radio buttons has the role=”group”. The question is referenced by the aria-labelledby attribute.  

What happens if you don’t group related items? In this survey form, the checkboxes and radio buttons are not grouped properly so the NVDA screen reader doesn’t read out the questions that relate to the controls.

An example of a form that isn't grouped shows how the he NVDA speech viewer reads out the content

Select Element

Another example of grouping is within the <select> element, also known as a dropdown list. A <select> element will contain a number of <option> elements with the choices. 

Optgroup Element

You can use an <optgroup> element to group the choices. Your <optgroup> needs a label to indicate the type of group it is. In this example, the groups are Boys, Girls and Animals. The <optgroup> label shows above the items in the group and it is not selectable.

A field titled Select a Peanuts character shows a dropdown of names

You can also add a horizontal rule <hr> tag to break up the groups and it will be shown by the browser.

A field titled Select a Peanuts character shows a dropdown of names, sorted by type where the type is bold and italic, and the active option is highlighted in gray

The default styling of <optgroup> elements is pretty basic and varies across browsers. Firefox and Chrome both show the optgroup label in bold text; in Firefox it’s also italicised. In Safari on iOS the optgroup labels are in smaller and paler text.

Three screenshots show the visual difference between how Firefox, Chrome, and Safari show optgroup styling by default

You can alter the display of the <option> and <optgroup> within the <select> element with CSS. Here is an example with the <option>s having blue text and a pale yellow background (except for the selected one). The <optgroup> has dark slate blue text with a darker yellow background. On Firefox the <optgroup> is shown with bold text but not italic.

A field shows a dropdown of names, beside it shows the CSS to change the colors

Here is an example of <optgroup> usage on a live site. The boat trips in the enquiry form are organized into four categories: Public trips; Private and corporate boat hire; Groups, tour operators, schools and 3 hour inclusive cruise packages.

Another possible usage of <optgroup> is to select a country, with the list of countries grouped by continent.

A field called Country shows a dropdown of countries grouped by continent

Remember, though, that long lists are harder to navigate. Instead, you could ask a user what continent they live in first, and then, based on that choice, present them with a smaller select list of countries to choose from. However, Gov.UK reports that users can struggle to use select elements, so providing radio buttons might be a better choice if the select list is small.

A Continent field has North America Selected, and a Country field shows a dropdown of all the country options.

Learn more about designing accessible forms and other types of content here.