A row of cells in a tabular container.
Description
A row of cells in a tabular container.
Rows contain cell or gridcell elements, and thus serve to organize the table or grid.
In a treegrid, authors MAY mark rows as expandable, using the aria-expanded attribute to indicate the present status. This is not the case for an ordinary table or grid, in which the aria-expanded attribute is not present.
Authors MUST ensure elements with role row are contained in, or owned by, an element with the role table, grid, rowgroup, or treegrid.
Role=Row 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>Characteristics
Superclass Role
- group
- widget
Base Concept
- HTML tr
Required Context Role
- grid
- rowgroup
- table
- treegrid
Required Owned Elements
- cell
- columnheader
- gridcell
- rowheader
Supported States and Properties
- aria-colindex
- aria-level
- aria-rowindex
- aria-selected
Inherited States and Properties
- aria-activedescendant
- 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
- contents
- author
Semantic HTML
Use the HTML <tr> tag.
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Reference
- W3C (opens new window)