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.
Description
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.
Examples
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 menuitem
s:
<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.
Specifications
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA) # group |