group

When to use

For grouped form controls, use <fieldset> with <legend>. Native gives you the group semantics, the visual border (style as you like), and the legend association.

role="group" is the right tool when:

• You’re wrapping a set of related but non-form controls (a date picker’s three combo boxes, a row of icon toggles).
• You need to mark a sub-region inside a tree, treeview, or grid where each level’s children form a logical group.
• You want a grouping that is NOT exposed as a landmark — for that distinction, see role="region".

A group SHOULD have an accessible name (aria-label or aria-labelledby) when its purpose is not obvious from context. Without a name, the group is invisible to screen readers and the role adds no value.

Common failures

• role="group" with no accessible name. Screen readers ignore the role; the group is invisible.
• Using role="group" where <fieldset> + <legend> would work. Native is preferred.
• Confusing role="group" with role="region". Region is a landmark and shows up in landmark navigation; group does not.
• Marking every UI section as a group. Use sparingly — too many groupings flatten the value of each one.
• role="group" on the wrapper around a role="tablist". Redundant; the tablist is already a grouping construct.

Example

<!-- Preferred for form controls -->
<fieldset>
  <legend>Date of birth</legend>
  <label>Day <input type="text" inputmode="numeric"></label>
  <label>Month <input type="text" inputmode="numeric"></label>
  <label>Year <input type="text" inputmode="numeric"></label>
</fieldset>

<!-- Non-form grouping -->
<div role="group" aria-labelledby="ratingLabel">
  <span id="ratingLabel">Rate this article</span>
  <button type="button" aria-label="1 star">★</button>
  <button type="button" aria-label="2 stars">★★</button>
</div>