Roles

WAI-ARIA: Role=Rowgroup

Authored By :Raghavendra Satish Peri Last Updated :April 24, 2024 Roles

A structure containing one or more row elements in a tabular container.

Description

A structure containing one or more row elements in a tabular container.

The rowgroup role establishes a relationship between owned row elements. It is a structural equivalent to the thead, tfoot, and tbody elements in an HTML table element.

Authors MUST ensure elements with role rowgroup are contained in, or owned by, an element with the role table or grid.

Note: The rowgroup role exists, in part, to support role symmetry in HTML, and allows for the propagation of presentation inheritance on HTML table elements with an explicit presentation role applied.

Note: This role does not differentiate between types of row groups (e.g., thead vs. tbody), but an issue has been raised for WAI-ARIA 2.0.

Role=Rowgroup Example

HTML Example 1

The following example shows a grid with 16 columns, of which columns 2, 3, 4, and 9 are displayed to the user. Because the set of columns is non-contiguous, aria-colindex needs to be placed on all of the owned elements of each row.

<div role="grid" aria-colcount="16">
<div role="rowgroup">
<div role="row">
<span role="columnheader" aria-colindex="2">First Name</span>
<span role="columnheader" aria-colindex="3">Last Name</span>
<span role="columnheader" aria-colindex="4">Company</span>
<span role="columnheader" aria-colindex="9">Phone</span>
</div>
</div>
<div role="rowgroup">
<div role="row">
<span role="gridcell" aria-colindex="2">Fred</span>
<span role="gridcell" aria-colindex="3">Jackson</span>
<span role="gridcell" aria-colindex="4">Acme, Inc.</span>
<span role="gridcell" aria-colindex="9">555-1234</span>
</div>
<div role="row">
<span role="gridcell" aria-colindex="2">Sara</span>
<span role="gridcell" aria-colindex="3">James</span>
<span role="gridcell" aria-colindex="4">Acme, Inc.</span>
<span role="gridcell" aria-colindex="9">555-1235</span>
</div>
…
</div>
</div>

HTML Example 2

<table>
<thead role="rowgroup">
<!-- etc -->
</thead>
<tbody role="rowgroup">
<!-- etc -->
</tbody>
</table>

Characteristics

Superclass Role

structure

Base Concept

HTML tbody
HTML tfoot
HTML thead

Required Context Role

Required Owned Elements

Inherited States and Properties

Name From

contents
author

Semantic HTML

You can use the HTML <tbody> tag to group rows.

<table>
<tbody>
<tr>
<td>first</td>
<td>first</td>
<td>first</td>
</tr>
<tr>
<td>second</td>
<td>second</td>
<td>second</td>
</tr>
</tbody>
<tbody>
<tr>
<td>third</td>
<td>third</td>
<td>third red</td>
</tr>
<tr>
<td>fourth</td>
<td>fourth</td>
<td>fourth red</td>
</tr>
<tr>
<td>fifth</td>
<td>fifth</td>
<td>fifth red</td>
</tr>
</tbody>
</table>

Reference

WAI-ARIA 1.2 Specification
Refer to the notes from the WAI-ARIA 1.2 specification for more information on role=rowgroup.

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.