Fieldsets, Legends and Screen Readers again

Group labels

The grouping and labeling of thematically related controls within a form is an important aspect of providing semantic information so users can understand and complete a form successfully.

Using the fieldset and legend elements

The HTML specification provides a method for grouping and labeling related form controls. This capability is provided by the use of the fieldset and legend elements:

The fieldset element represents a set of form controls (or other content) grouped together, optionally with a caption. The caption is given by the first legend element that is a child of the fieldset element, if any. The remainder of the descendants form the group.

Whenever a label is needed to provide information about a related set of controls, consider using the legend and fieldset elements. They can be used to group any thematically related controls in a form such as address details, date of birth and sets of radio buttons or check boxes.

Example code:

<fieldset>
<legend>Which version of HTML do you use?</legend>
<input type="radio" name="html" id="html4" value="html1">
<label for="html4">HTML1</label>
<input type="radio" name="html" id="html5" value="html2">
<label for="html5">HTML2</label>
</fieldset>

The <fieldset> element is exposed as role=group and is labeled by the <legend> element content. In other words the <legend> element is the source of the accessible name for the <fieldset>

When a <fieldset> and <legend> are used to group and label controls, screen readers typically announce them in a predictable way:

1. Group start
2. Group label
3. First Control type
4. First Control name
5. … (further controls)
6. Group end

Note: The presence of a <fieldset> (or other element with role="group"), without a group label to provide an accessible name, will typically not be announced to users.

The group label is typically only announced by screen readers when the <fieldset> (or other element with role="group") is navigated into using the Arrow keys or other read-navigation keystrokes, or when focus moves from outside the <fieldset> onto a control inside the <fieldset>

Heading use

It is also permissible to have a heading element (<h1> to <h6>) nested within the <legend> element:

<fieldset>
<legend>
<h3>Which version of HTML do you use?</h3>
</legend>
...
</fieldset>

By adding a heading screen reader users can navigate to the heading and the legend text is also included as part of navigable document structure.

HTML + ARIA Variations 

If it’s not possible or practical to use only native HTML elements, then you can achieve the same grouping and labeling using ARIA attributes. Here are some examples.

Note: Some patterns may result in the group label being announced twice, depending on how the group/controls are navigated to.

Heading outside of <fieldset>, associated using aria-labelledby, no <legend>

In this example, the HTML heading also provides the source of the accessible name for the <fieldset>:

<h3 id="whichX">
Which version of XHTML do you use?
</h3> 
<fieldset aria-labelledby="whichX"> 
... 
</fieldset> 

Using <fieldset> and aria-labelledby, no <legend>

In this example, a <div> child of the <fieldset> provides the source of the accessible name for the <fieldset>:

<fieldset aria-labelledby="groupLabel"> 
<div id="groupLabel">
Which version of HTML do you use?
</div> 
... 
</fieldset> 

Using <div> with role=group and aria-labelledby

In this example, a <div> replaces the <fieldset> and provides the same function by the addition of role="group". The accessible name for the group is provided by referencing a nested <div> using aria-labelledby:

<div role="group" aria-labelledby="groupLabel"> 
<div id="groupLabel">
Which version of HTML do you use?
</div> 
... 
</div> 

Using <div> with role=group and aria-label

In this example, a <div> replaces the <fieldset> and provides the same function by the addition of role="group". The accessible name for the group is provided by using aria-label on the <div role="group">:

<h3>Which version of HTML do you use?</h3> 
<div role="group" 
aria-label="Which version of HTML do you use?"> 
... 
</div> 

Note: The group label provided via aria-label is the same as the heading text that precedes the control group, this may result in screen reader users hearing the same text twice. But it also ensures that the group label will be announced regardless of how the user navigates to the control group.

Try the variations for yourself:

See the Pen Grouping Form Controls – TPGi Design Pattern | TPGi KB by steve faulkner (@stevef) on CodePen.