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

Who might be affected


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

Add the "scope" attribute to table headers to associate them correctly to the table data.
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>

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