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