WAI-ARIA: Role=Rowheader • Digital A11y

A cell containing header information for a row in a grid.

Description

A cell containing header information for a row in a grid.

Rowheader can be used as a row header in a table or grid. The rowheader establishes a relationship between it and all cells in the corresponding row. It is a structural equivalent to setting scope=”row” on an HTML th element.

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

Applying the aria-selected state on a rowheader MUST not cause the user agent to automatically propagate the aria-selected state to all the cells in the corresponding row. An author MAY choose to propagate selection in this manner depending on the specific application.

While the rowheader role can be used in both interactive grids and non-interactive tables, the use of aria-readonly and aria-required is only applicable to interactive elements. Therefore, authors SHOULD NOT use aria-required or aria-readonly in a rowheader that descends from a table, and user agents SHOULD NOT expose either property to assistive technologies unless the rowheader descends from a grid.

Example

HTML Example

<table summary="Marks of students for class IX"> <tbody><tr>
<td role="columnheader">Names</td>
<td role="columnheader">Mathematics</td>
<td role="columnheader">Physics</td>
<td role="columnheader">Chemistry</td>
</tr>
<tr>
<td role="rowheader">Student A</td>
<td>70</td>
<td>80</td>
<td>90</td>
</tr>
<tr>
<td role="rowheader">Student B</td>
<td>60</td>
<td>70</td>
<td>80</td>
</tr>
<tr>
<td role="rowheader">Student C</td>
<td>75</td>
<td>85</td>
<td>95</td>
</tr>
</tbody></table>
Note: Because cells are organized into rows, there is not a single container element for the column. The column is the set of gridcell elements in a particular position within their respective row containers.

Characteristics

Superclass Role

cell
gridcell
sectionhead

Base Concept

HTML th[scope=”row”]

Required Context Role

Supported States and Properties

aria-sort

Inherited States and Properties

aria-atomic
aria-busy (state)
aria-colindex
aria-colspan
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-readonly
aria-relevant
aria-required
aria-roledescription
aria-rowindex
aria-rowspan
aria-selected (state)

Name From

contents
author

Accessible Name Required

True

Semantic HTML

Use the HTML <th scope=“row”> tag.

<table>
<caption>Delivery slots:</caption>
<tr>
<td></td>
<th scope="col">Monday</th>
<th scope="col">Tuesday</th>
<th scope="col">Wednesday</th>
<th scope="col">Thursday</th>
<th scope="col">Friday</th>
</tr>
<tr>
<th scope="row">09:00 - 11:00</th>
<td>Closed</td>
<td>Open</td>
<td>Open</td>
<td>Closed</td>
<td>Closed</td>
</tr>
<tr>
<th scope="row">11:00 - 13:00</th>
<td>Open</td>
<td>Open</td>
<td>Closed</td>
<td>Closed</td>
<td>Closed</td>
</tr>
[…]
</table>

Reference

W3C (opens new window)