WAI-ARIA: Role=Rowgroup • Digital A11y

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.

Example

HTML Example

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">

</thead>
<tbody role="rowgroup">

</tbody>
</table>

Characteristics

Superclass Role

structure

Base Concept

HTML tbody
HTML tfoot
HTML thead

Required Context Role

grid
table
treegrid

Required Owned Elements

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-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

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

W3C (opens new window)