In the first section of this series, I'll be talking about roles. Today's article is about ARIA's table roles. If you missed my Landmark Roles post, go check it out!
Document structure roles add context to structural page content that is not interactive. Some of these roles are redundant if you use semantic HTML to write your markup. Document structure roles differ from landmark roles in that they describe smaller areas that organize content rather than the large sections landmark roles indicate.
The roles for tables all have corresponding semantic HTML elements, which are preferable to using the following roles on more generic elements. Remember, always use semantic HTML when possible! As a side note, tables are for displaying data in a tabular manner (rows and columns). Please don't use tables as a way to lay out your page. Learning to use CSS grid will benefit you and your users much more!
table role indicates that the data is contained within a non-interactive table structure. That is to say, it organizes data into columns and rows. An element with the
table role must contain elements with the
row role. The
<table> element has an implicit
rowgroup role denotes a group of rows within a table. This corresponds with the
<thead> (or table head),
<tbody> (or table body), and
<tfoot> (or table footer) elements. An element with the
rowgroup role must be contained within an element with the
grid role. (We'll discuss the
grid role in the widgets section of this series.)
row role denotes a row within a table. This directly corresponds with the
<tr> (or table row) element. Elements with the
row role must be contained by an element with the
columnheader role denotes the element's contents as the header for a column of data. The
<th> (or table header) element has an implicit role of
columnheader. An element with the
columnheader role must be a descendant of an element with the
rowheader role establishes the relationship between that cell and all the cells within the same row. The
<th> (or table header) element also denotes an element with the implicit role of
rowheader. An element with the
rowheader role must be contained within an element with the
cell role denotes the element's contents as data in a table cell. The
<td> (or table data) element has an implicit role of
cell. An element with the
row role must belong to an element with the
<table> <!--role="table"--> <thead> <!--role="rowgroup"--> <tr> <!--role="row"--> <th>Pet Name</th> <!--role="columnheader"--> <th>Type of Animal</th> <th>Age</th> <th>Hobbies</th> </tr> </thead> <tbody> <!--role="rowgroup"--> <tr> <!--role="row"--> <th>Captain</th> <!--role="rowheader"--> <td>Dog</td> <!--role="cell"--> <td>7</td> <td>Sleeping</td> </tr> <tr> <th>Piper</th> <td>Dog</td> <td>2</td> <td>Chasing bugs</td> </tr> <tr> <th>Skeletor Beletor</th> <td>Cat</td> <td>3</td> <td>Skulking around</td> </tr> </tbody> </table>
As far as tables go, as long as you're using semantic HTML, you don't really need to add these ARIA roles. However, learning about them can give you an appreciation for how much work semantic HTML does for you.
Next week, we'll continue learning about document structure roles!