Description
This technique demonstrates how to use the group role and describes the effect it has on browsers and assistive technology.
The group role is used to identify a set of user interface objects which, in contrast with a region, are not intended to be included in a table of contents or a page summary (such as the structures that are dynamically created by a script or assistive technologies); a group should not be considered a major perceivable section on a page. 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.
A group 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. However, when a group is used in the context of list, authors must limit its children to listitem elements. Group elements may be nested.
Proper handling of a group by assistive technologies is determined by the context in which it is provided.
If an author believes a section is significant enough to warrant inclusion in the page's table of contents, they should assign the section a role of region or a standard landmark role.
Possible effects on user agents and assistive technology
When the group role is added to an element, or such an element becomes visible, the user agent should do the following:
- Expose the element as having a group role in the operating system's accessibility API.
- Fire an accessible group event using the operating system's accessibility API if it supports it.
Assistive technology products should listen for such an event and notify the user accordingly:
- Screen readers should announce the group when focus first lands on a control inside it, and if aria-describedby has been set, the description may be spoken. Following this the focused control may be announced.
- Screen magnifiers may enlarge the group.
Examples
Example 1: Using the group role with a HTML tree view
The snippet below shows how the group role is added directly into the html source code.
<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>
Example 2: Using the group role with a HTML drop-down menu
The snippet below shows how the group role is added directly into the html source code.
<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>
Working Examples:
-
Unknown Title (https://test.cita.illinois.edu/aria/tree/tree2.php) [broken link]
Notes
- Group members that are outside of the DOM subtree of the group need to have explicit relationships assigned to them in order to participate in the group.
ARIA attributes used
Related ARIA techniques
- region role
Compatibility
TBD: Add support information for common UA and AT product combinations
Additional resources
- ARIA Best Practices – Directories, Groups and Regions: https://www.w3.org/TR/wai-aria-practices/#kbd_layout_groupheading