What does this accessibility issue mean?
Issue summary: Table header doesn’t refer to a cell in the table
To tables on your website are accessible, every table header (<th>) element that has a scope attribute in place should also have at least one <td> (table data) or <th> (table header) element that references it by using the table headers attribute.
This is important for accessibility because it helps ensure that header cells are properly associated with their corresponding data cells, making it easier for users to understand the content of a table via screen readers and other assistive technology.
Solution:
Ensure that <th> elements and elements with “role=columnheader/rowheader” have data cells they describe.
Example HTML violation: Table header doesn’t refer to cell (WCAG Level A Issue)
<table>
<tbody>
<tr>
<th>Heading</th>
</tr>
</tbody>
</table>The above HTML violates the th-has-data-cells accessibility rule because it includes a header (th) element without any associated data cells (td). This rule ensures that each th element has corresponding td elements.
To correct this violation, we need to add a td element inside the tr for each th.
How to fix "Table header doesn’t refer to cell (WCAG Level A Issue)" issue
<table>
<thead>
<tr>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data Cell</td>
</tr>
</tbody>
</table>In this updated version: - We are still retaining the th element to act as our header row. - We have added a td element to create a data cell, ensuring the th element now has a data cell it describes. - We have used thead for the header and tbody for the body content to further clarify their roles, but it's not necessary. This makes the table more accessible and adheres to web content accessibility guidelines.
For more information about accessible table, you can refer to W3C Web Accessibility Tutorials.
