DEV Community

Kayla Sween
Kayla Sween

Posted on

3

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!

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay