How do I fix table headers incorrectly marked?

Summary

Table headers must use elements so assistive technologies can understand and convey the structure and meaning of table data. If header cells are incorrectly marked as , the relationship between headers and data cells is not communicated, causing accessibility issues.

Overview

A table is a grid of labeled columns and rows used to arrange information. Sighted users can make a visual association between table header and data cells of a table. This context gives meaning to the data contained in the table. When navigating through a table with a screen reader, it’s important that the same association is created programmatically. This means that each data point in the table needs to be associated to the right row or column header giving context to the data.

Question

Why does using <td> instead of <th> cause accessibility issues?

Answer

Consider a table like this: 

<table>

    <tr><th></th><th>Mon-Fri</th><th>Sat-Sun</th></tr>

    <tr><td><strong>Summer Hours</strong></td><td>8:00 - 17:00</td><td>10:00 - 14:00</td></tr>

    <tr><td><strong>Winter Hours</strong></td><td>9:00 - 15:00</td><td>12:00 - 14:00</td></tr>

</table>

Visually, this table has four headers. “Mon-Fri” and “Sat-Sun” are column headers, and “Summer Hours” and “Winter Hours” are row headers. Visually, it’s clear which cells are the headers, but there is a problem in the HTML with the row headers “Summer Hours” and “Winter Hours.” Because they use <td> (table data) tags instead of <th> (table header), web browsers and assistive technologies have no way of knowing that they’re row headers. Instead, they are seen as regular data cells. This accessibility rule checks that all regular data cells have headers, and of course these ones don’t because they are headers. So, they fail the rule.

Fix

Mark the row headers as such by using <td> for them instead of <th>. In the example above, the fixed HTML would look like this: 

<table>

    <tr><th></th><th>Mon-Fri</th><th>Sat-Sun</th></tr>

    <tr><th>Summer Hours</th><td>8:00 - 17:00</td><td>10:00 - 14:00</td></tr>

    <tr><th>Winter Hours</th><td>9:00 - 15:00</td><td>12:00 - 14:00</td></tr>

</table>