Groups

Groups are implemented using the [role=group] attribute, combined with elements like <div>, <section>.

Its used as a building block for grouping:

• Buttons together in a menu, or Pagination area;
• Form controls together like a Search input and its submit button;
• Items together in a Card Group, to indicate the status or progress of a resource.

Accessibility: Keep in mind that if an element with role="group" is not labeled (meaning, that it doesn't have aria-label or aria-labelledby attribute), it will be ignored by screen readers and this may result in users not receiving a clear indication of the purpose of the group.

Important: Best not to mix role="group" elements that have an implicit role, like <ul>, <ol>, and landmark elements like <main>, <header>, etc. it may lead to unexpected or confusing anouncements.

Input Group

This is the ARIA equivalent of saying:

"These controls/content belong together as a logical set."

<fieldset aria-label="Email subscription" role="group">
  <input type="email" placeholder="Enter your email"></input>
  <input type="submit" value="Subscribe"></input>
</fieldset>

Screen readers may announce:

"Email subscription, group"

See <fieldset> for more examples of grouping form controls.

Button Group

When you have a set of related buttons, but they don't fit into a toolbar or menu.

<div aria-label="Text formatting" role="group">
  <button>
    Bold
  </button>
  <button aria-current="true">
    Italic
  </button>
  <button>
    Strikethrough
  </button>
  <button>
    Underline
  </button>
</div>

See Pagination for more details.

Card Group

If you combine the role="group" with the .card class, you can create a group of related items, to indicate the status or progress of a resource.

Check out Card Group documentation page for more examples.

<div class="card" role="group">
  <span>
    Processed
  </span>
  <span>
    Shipped
  </span>
  <span aria-current="true">
    In route
  </span>
  <span aria-disabled="true">
    Delivered
  </span>
</div>