Why do empty table header cells cause accessibility failures?

Summary

Empty table header cells do not provide meaningful context to assistive technologies, making it difficult for users to understand the relationship between data cells.

Overview

Tables rely on header cells to provide context for the data they contain. When navigating through a table with a screen reader, each data cell should be associated with a relevant header.

Question

Why is an empty <th> element a problem for accessibility?

Explanation

Consider this table:

<table>

  <tr>

    <th>Filename</th>

    <th></th>

    <th>Date</th>

  </tr>

  <tr>

    <td>Request for Proposal, Final</td>

    <td>pdf</td>

    <td>2023-11-17</td>

  </tr>

  <tr>

    <td>Meeting Minutes</td>

    <td>docx</td>

    <td>2023-12-10</td>

  </tr>

  <tr>

    <td>Consulting Rates</td>

    <td>pdf</td>

    <td>2023-05-20</td>

  </tr>

  <tr>

    <td>On-call rotation</td>

    <td>docx</td>

    <td>2023-11-20</td>

  </tr>

</table>

The "Table cell missing context" error will be flagged on the four cells in the “pdf” / “docx” column. This happens because the column header cell above them is empty.

Resolution

Option 1 Fix:

Add some visible text to the column header cell. For example: “File Format.”

<table>

  <tr>

    <th>Filename</th>

    <th>File Format</th> <!-- *NEW* -->

    <th>Date</th>

  </tr>

  <tr>

    <td>Request for Proposal, Final</td>

    <td>pdf</td>

    <td>2023-11-17</td>

  </tr>

  <tr>

    <td>Meeting Minutes</td>

    <td>docx</td>

    <td>2023-12-10</td>

  </tr>

  <tr>

    <td>Consulting Rates</td>

    <td>pdf</td>

    <td>2023-05-20</td>

  </tr>

  <tr>

    <td>On-call rotation</td>

    <td>docx</td>

    <td>2023-11-20</td>

  </tr>

</table>

Option 2 Fix:

Add some visually hidden text to the column header cell.

“Visually hidden” means that the header cell will appear empty to sighted users, but there is some text – “File Format” – in that cell that is perceivable to assistive technologies.

First, you need to add text like “File Format” to the cell, just as “Fix Option 1” did. Then you need to make that text visually hidden by adding the right CSS class to it. Most libraries and frameworks include a "visually-hidden" CSS class. Common names for this class are "visually-hidden" or "sr-only" (“SR” stands for “screen reader”). If you don’t have a CSS class like this already, you can use the one below. (Source: TPGI blog, “The anatomy of visually-hidden”).

.visually-hidden:not(:focus):not(:active) {

    clip-path: inset(50%);

    height: 1px;

    overflow: hidden;

    position: absolute;

    white-space: nowrap;

    width: 1px;

}

Then use the "visually-hidden" class on the “File Format” column header: 

<table>

  <tr>

    <th>Filename</th>

    <th class="visually-hidden">File Format</th> <!-- *NEW* -->

    <th>Date</th>

  </tr>

  <tr>

    <td>Request for Proposal, Final</td>

    <td>pdf</td>

    <td>2023-11-17</td>

  </tr>

  <tr>

    <td>Meeting Minutes</td>

    <td>docx</td>

    <td>2023-12-10</td>

  </tr>

  <tr>

    <td>Consulting Rates</td>

    <td>pdf</td>

    <td>2023-05-20</td>

  </tr>

  <tr>

    <td>On-call rotation</td>

    <td>docx</td>

    <td>2023-11-20</td>

  </tr>

</table>

Visually, this table looks the same as it did before we fixed the error. But now it contains a visually hidden column header named “File Format.” This header will be exposed to assistive technologies properly, and the “Table cell missing context” rule will pass.