WAI-ARIA: Role=Rowheader
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.
Role=Rowheader 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
Base Concept
- HTML th[scope=”row”]
Required Context Role
Supported States and Properties
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
- WAI-ARIA 1.2 Specification
Refer to the notes from the WAI-ARIA 1.2 specification for more information on role=rowheader.
How may I make this work? aria:flowto=”” does not work. Thank you.
A Complex Test Table:
1 Read me first.
3 read me third.
2 read me second.
4 read me fourth.
5 read me fifth.
7 read me seventh.
6 read me sixth.
8 read me eight.