Document Structure Roles: Table Roles (Introduction to WAI-ARIA Part 3)

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.

Table Roles

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!

role="table"

The 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 role="table" attribute.

role="rowgroup"

A 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 table or grid role. (We'll discuss the grid role in the widgets section of this series.)

role="row"

A 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 table, grid, treegrid, or rowgroup role.

role="columnheader"

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 row role.

role="rowheader"

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 row role.

role="cell"

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 row role.

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

Let's wrap up this week's lesson!

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!