ARIA: group role

The group role identifies a set of user interface objects that is not intended to be included in a page summary or table of contents by assistive technologies.

Most closely related to HTML's <fieldset> element, the group document structure role is used to identify a set of user interface objects which, as compared to region, is not intended to be included in the page's summary or table of contents.

The group role should be used to form a logical collection of items with related functionality, such as children in a tree widget forming a collection of siblings in a hierarchy, or a collection of items having the same container in a directory.

When a group is used in the context of list, limit the children of the group to listitem elements. In this case, it is recommended to use multiple ordered or unordered lists, <ol> or <ul>, with nested <li> children.

When used in the context of a listbox, the only children allowed are <option> elements. In this case, it is recommended to use <select>, <option> and <optgroup> instead.

Group elements may be nested.

The group role should not be used for major perceivable sections of a page. If a section is significant enough that it should be included in the page's table of contents, use the region role or a standard landmark role.

When the role is added to an element, the browser will send out an accessible group event to assistive technology products, which can then notify the user about it.

The HTML code example below uses the group role with a tree view:

<div id="tree1" role="tree" tabindex="-1">
  <div id="animals" class="groupHeader" role="presentation" aria-owns="animalGroup" aria-expanded="true">
    <img role="presentation" tabindex="-1" src="images/treeExpanded.gif" />
    <span role="treeitem" tabindex="0">Animals</span>
  </div>
  <div id="animalGroup" role="group">
    <div id="birds" role="treeitem">
      <span tabindex="-1">Birds</span>
    </div>
    <div id="cats" class="groupHeader" role="presentation" aria-owns="catGroup" aria-expanded="false">
      <img role="presentation" tabindex="-1" src="images/treeContracted.gif" />
      <span role="treeitem" tabindex="0">Cats</span>
    </div>
    <div id="catGroup" role="group">
      <div id="siamese" role="treeitem">
        <span tabindex="-1">Siamese</span>
      </div>
      <div id="tabby" role="treeitem">
        <span tabindex="-1">Tabby</span>
      </div>
    </div>
  </div>
</div>

The following example uses the group role with a drop-down menu containing menuitems:

<div role="menu">
  <ul role="group">
    <li role="menuitem">Inbox</li>
    <li role="menuitem">Archive</li>
    <li role="menuitem">Trash</li>
  </ul>
  <ul role="group">
    <li role="menuitem">Custom Folder 1</li>
    <li role="menuitem">Custom Folder 2</li>
    <li role="menuitem">Custom Folder 3</li>
  </ul>
  <ul role="group">
    <li role="menuitem">New Folder</li>
  </ul>
</div>

This menu could be constructed using <select> and <option> elements. In this case, the group role would be most similar to the <optgroup> element.

• The <fieldset> Element
• ARIA: section role
• ARIA: row role
• ARIA: select role
• ARIA: toolbar role