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 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
Base Concept
- HTML tbody
- HTML tfoot
- HTML thead
Required Context Role
Required Owned Elements
- row
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)