A set of user interface objects which are not intended to be included in a page summary or table of contents by assistive technologies.
Description
A set of user interface objects which are not intended to be included in a page summary or table of contents by assistive technologies.
Contrast with region which is a grouping of user interface objects that will be included in a page summary or table of contents.
Authors SHOULD use a group to form logical collection of items in a widget 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. Therefore, proper handling of group by authors and assistive technologies is determined by the context in which it is provided.
Authors MAY nest group elements. If a section is significant enough to warrant inclusion in the web page’s table of contents, the author SHOULD assign the section a role of region or a standard landmark role.
Screen Reader Support For Role=Group
| Expectation | JAWS | Narrator | NVDA | Orca | TalkBack | VoiceOver (iOS) | VoiceOver (macOS) | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Edge | Chrome | Edge | Firefox | Firefox | Chrome | Safari | Safari | |
| MUST convey its role | supported | supported | partial | partial | supported | supported | partial | supported | none | none | supported |
| MUST convey the name if named | supported | supported | supported | partial | supported | supported | supported | supported | none | none | supported |
| SHOULD convey the boundaries of the group | supported | supported | partial | partial | supported | supported | partial | supported | none | none | supported |
| MUST NOT convey a role or boundaries if it is not named | supported | supported | supported | supported | supported | supported | supported | supported | supported | supported | supported |
Role=Group Example
HTML Example
<figure aria-labelledby="operahouse_1" role="group">
<img src="/operahousesteps.jpg" alt="The Sydney Opera House">
<figcaption id="operahouse_1">
We saw the opera <cite>Barber of Seville</cite> here!
</figcaption>
</figure>HTML Example 2
<div role="group">
<button>Previous</button> <button>Next</button>
</div>Characteristics
Superclass Role
- section
Subclass Roles
- row
- select
- toolbar
Related Concepts
- HTML fieldset
Supported States and Properties
- aria-activedescendant
Inherited States and Properties
- aria-atomic
- aria-busy (state)
- aria-controls
- aria-current (state)
- aria-describedby
- aria-details
- aria-disabled (state)
- aria-dropeffect
- aria-errormessage
- aria-expanded (state)
- aria-flowto
- aria-grabbed (state)
- aria-haspopup
- aria-hidden (state)
- aria-invalid (state)
- aria-keyshortcuts
- aria-label
- aria-labelledby
- aria-live
- aria-owns
- aria-relevant
- aria-roledescription
Name From
- author
Semantic HTML
No HTML element equivalent.
Reference
- W3C (opens new window)
- A11Y Support