WAI-ARIA: Role=Group

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated : Roles
WAI-ARIA: Role=Group
WAI-ARIA: Role=Group

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

ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
MUST convey its rolesupportedsupportedpartialpartialsupportedsupportedpartialsupportednonenonesupported
MUST convey the name if namedsupportedsupportedsupportedpartialsupportedsupportedsupportedsupportednonenonesupported
SHOULD convey the boundaries of the groupsupportedsupportedpartialpartialsupportedsupportedpartialsupportednonenonesupported
MUST NOT convey a role or boundaries if it is not namedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported

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

Name From

  • author

Semantic HTML

No HTML element equivalent.

Reference

Share A11Y Love

Avatar for Raghavendra Satish Peri

Raghavendra Satish Peri empowers enterprises with his expertise in digital accessibility and marketing. Through his impactful work, he collaborates with both small businesses and large enterprises, spearheading digital transformation initiatives. Raghavendra is the author behind the influential Accessibility Blog hosted at DigitalA11Y.com, where he delves into the intricate realm of digital accessibility and its significance.
Passionate about fostering change within the tech landscape, Raghavendra actively inspires local tech communities through engaging meetups and mentorship. He is the driving force behind HelloA11Y.com, a vibrant platform that unites accessibility professionals, developers, and enthusiasts, propelling the adoption of accessible practices.
Beyond the digital realm, Raghavendra seeks diverse experiences. You might find him exploring various cuisines at local cafes and restaurants or immersing himself in thought-provoking audio books. His insights and musings also find a home on his Personal Blog at raghava.in, where he shares his thoughts and experiences with a wider audience.

Similar Posts

WAI-ARIA: Role=Cell

WAI-ARIA: Role=Cell

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

A cell in a tabular container. Description New in ARIA 1.1 A cell in a tabular container. See related gridcell. Authors MUST ensure elements with role cell are contained in, or owned by, an element with the role row. Role=Cell Example HTML Example Characteristics Superclass Role Subclass Roles Base Concept Required Context Role Supported States…

WAI-ARIA:Role=Button

WAI-ARIA:Role=Button

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

An input that allows for user-triggered actions when clicked or pressed. Description An input that allows for user-triggered actions when clicked or pressed. See related link. Buttons are mostly used for discrete actions. Standardizing the appearance of buttons enhances the user’s recognition of the widgets as buttons and allows for a more compact display in…

WAI-ARIA: Role=MenuitemCheckbox

WAI-ARIA: Role=MenuitemCheckbox

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

A menuitem with a checkable state whose possible values are true, false, or mixed. Description A menuitem with a checkable state whose possible values are true, false, or mixed. The aria-checked attribute of a menuitemcheckbox indicates whether the menu item is checked (true), unchecked (false), or represents a sub-level menu of other menu items that…

WAI-ARIA: Role=Navigation

WAI-ARIA: Role=Navigation

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

A collection of navigational elements (usually links) for navigating the document or related documents. Description A collection of navigational elements (usually links) for navigating the document or related documents. User agents SHOULD treat elements with the role of navigation as navigational landmarks. Screen Reader Support For Role=Navigation Expectation JAWS Narrator NVDA Orca TalkBack VoiceOver (iOS) VoiceOver (macOS)…

Leave a Reply

Your email address will not be published. Required fields are marked *