th-has-data-cells

All <th> elements and elements with role="columnheader" or role="rowheader" must have data cells they describe

Who might be affected
SR

Description

Screen readers rely on a certain table structure for it to be able to read and parse the table data correctly. When tables are not properly structured, screen readers may fail to read their data accurately to the user.

Quick Fixes

See the example below: the <th> with the value "Col 3" is acting as a header to its column, but none of the column cells has data in it, therefore it should be removed. The same applies to the <th> with the value "Row 2" that's acting as a header to the row that also has empty cells.
Data Table:
Col 1Col 2Col 3
Row 1YesNo
Row 2
Row 3NoYes
1<table>
2 <caption>
3 Data Table:
4 </caption>
5 <tr>
6 <td></td>
7 <th scope="col">Col 1</th>
8 <th scope="col">Col 2</th>
9 <!-- This "th" has no data on its column and it should be removed -->
10<th scope="col">Col 3</th>
11 </tr>
12 <tr>
13 <th scope="row">Row 1</th>
14 <td>Yes</td>
15 <td>No</td>
16 <td></td>
17 </tr>
18 <tr>
19 <!-- This "th" has no data on its row and it should be removed -->
20<th scope="row">Row 2</th>
21 <td></td>
22 <td></td>
23 <td></td>
24 </tr>
25 <tr>
26 <th scope="row">Row 3</th>
27 <td>No</td>
28 <td>Yes</td>
29 <td></td>
30 </tr>
31</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