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
- row
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>
Leave a Reply