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
Screen Reader
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.
→
↓
Col 1 | Col 2 | Col 3 | |
---|---|---|---|
Row 1 | Yes | No | |
Row 2 | |||
Row 3 | No | Yes |
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)