The group role

Web
Intermediate

Publication date April 10, 2026

The `group` role #

This is one of the roles in the ARIA specification (the group role in ARIA 1.3 specification). It is one of the document structure roles.

What is the `group` role used for? #

It allows you to group page elements that should be treated as a single entity. In other words, it groups elements that share the same purpose, function, or a common goal.

This is a good way to convey the structural and relational information of a group to assistive technologies (AT) in a way other than through a purely visual indicator.

Support in ATs #

Support is generally good, with the exception of mobile environments (group support on A11ysupport). Since support remains partial, it's always important to test implementations with your target browser/AT environments, as always with ARIA.

When can it be used? #

For form elements #

The group role is ideal for acting as the equivalent of fieldset for form elements when there's no other option.

For other elements #

The group role can be used with any group of logically, semantically related elements.

Examples #

For a podcast playback control panel, it's a good idea to group the audio playback buttons. This is a visually identifiable logical group, and therefore should be identified for the ATs (Assistive Technologies).

<div role="group" aria-label="Podcast Audio Controller">
 <button>Play</button>
 <button>Pause</button>
 <button>Stop</button>
</div>

Here, we ensure that the information about the existence of the image and caption group is correctly conveyed to the ATs despite the poor native support of figure.

<figure aria-labelledby="opera_1" role="group">
 <img src="/operabatiment.jpg" alt="The Opéra Garnier, Paris, France">
 <figcaption id="opera_1">
 A performance of The Barber of Seville that I attended (Nov 2022)!
 </figcaption>
</figure>

In an application menu, the group role can be used to group the different types of possible actions. Here, a name isn't necessarily needed for the group; the categories are self-explanatory.

<div role="menu">
 <ul role="group">
  <li role="menuitem">Inbox</li>
  <li role="menuitem">Archive</li>
  <li role="menuitem">Recycle Bin</li>
 </ul>
 <ul role="group">
  <li role="menuitem">Personal Folder</li>
  <li role="menuitem">Family Folder</li>
  <li role="menuitem">Picture Folder</li>
 </ul>

 <ul role="group">
  <li role="menuitem">New Folder</li>
...
 </ul>
</div>

Best Practices #

When necessary for clarity, use aria-label or aria-labelledby to name any tag with a role="group".
Do not use role="group" instead of landmarks or HTML5 page structure tags.
The group role increases cognitive load for the user; use it sparingly and discreetly, and reserve it for truly necessary cases.
If using the group role, it is also beneficial to provide a visual indication of the grouping. Similar to the border generated by a fieldset around form elements, but other visual cues are possible.
group roles can be nested, but be mindful of the risk of excessive verbosity.

Conclusion #

Good interface design practices require that elements belonging to the same functional unit, or grouped together because they perform the same type of function, be visually grouped. Similarly, for assistive technologies (AT) and at the programmatic level, it is essential to convey this grouping information if it is necessary for a clear understanding of the interface. This is possible via the ARIA attribute role="group". Even though its support among AT/user agent pairs is not universal, feel free to use it judiciously.