td-headers-attr

All cells in a <table> element that use the headers attribute must only refer to other cells of that same <table>

Description

Table headers (<th>) should use the scope attribute to be explicit for screen readers about which group of cells it refers to and how the table should be read. The scope attribute gives table headers the context of cells it is referring to.

Quick Fixes

1<table>
2    <tr>
3        <th rowspan="2" aria-role="none"></th>
4        <th scope="colgroup" colspan="3">Summary</th>
5    </tr>
6    <tr>
7        <th scope="col">Quantity</th>
8        <th scope="col">Month</th>
9        <th scope="col">Amount</th>
10    </tr>
11    <tr>
12        <th rowspan="3" scope="rowgroup">Q1</th>
13        <td>1</td>
14        <td>January</td>
15        <td>$100</td>
16    </tr>
17    <tr>
18        <td>2</td>
19        <td>February</td>
20        <td>$80</td>
21    </tr>
22</table>

How Users Are Affected

When a screen reader fails to parse the semantic meaning of UI elements, it cannot mediate it correctly to the user. As a result, the user receives a partial or even incorrect mental image of the UI and might fail to use it.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
1.3.1 Info and relationships (A)

Recommended Reading

• Info and Relationships