Why is this an issue?

Table headers are essential to enhance the accessibility of a table’s data, particularly for assistive technologies like screen readers. These headers provide the necessary context to transform data into information. Without headers, users get rapidly lost in the flow of data.

This rule raises an issue whenever it detects a table that does not have a full row or column with <th> elements.

Exceptions

No issue will be raised on <table> used for layout purpose, i.e. when it contains a role attribute set to "presentation" or "none".

<table role="presentation">
  <tr>
    <td>Name</td>
    <td>Age</td>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>42</td>
  </tr>
</table>

Note that using <table> for layout purpose is a bad practice.

No issue will be raised on <table> containing an aria-hidden attribute set to "true".

<table aria-hidden="true">
  <tr>
    <td>Name</td>
    <td>Age</td>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>42</td>
  </tr>
</table>

How to fix it

The first <tr> of the table should contain <th> elements, with the appropriate description of what the data in those columns represents.

Going the extra mile

Headers should be properly associated with the corresponding <td> cells by using either a scope attribute or headers and id attributes. See W3C WAI Web Accessibility Tutorials for more information.

Code examples

Noncompliant code example

<table> <!-- Noncompliant -->
  <tr>
    <td>Name</td>
    <td>Age</td>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>24</td>
  </tr>
  <tr>
    <td>Alice Doe</td>
    <td>54</td>
  </tr>
</table>

Compliant solution

<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Age</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>24</td>
  </tr>
  <tr>
    <td>Alice Doe</td>
    <td>54</td>
  </tr>
</table>

Resources

Documentation