What does this accessibility issue mean?
Accessibility issue summary: misconfigured or missing table header data
Tables are commonly used to organize and present data in a structured manner, but without proper table header data, users may encounter several accessibility issues.
Screen readers and other assistive technologies rely on table header information (included in <th> elements in your code) to describe the column and row headers in a table to users with visual impairments. If these table headers are missing or misconfigured, screen reader users may not be able to easily comprehend the relationships between data cells in the table, making the entire table difficult to understand and navigate.
Solution:
Ensure that each cell in a table that uses the table headers attribute refers only to other cells in that table.
Example HTML violation: Misconfigured data table header (WCAG Level A Issue)
<table>
<thead>
<tr>
<th id="product-name">Product Name</th>
<th id="product-price">Price</th>
<th id="product-stock">Stock</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="item-name">Item 1</td>
<td headers="item-price">$10</td>
<td headers="item-stock">In stock</td>
</tr>
</tbody>
</table>This HTML code violates the td-headers-attr rule, because it uses the headers attribute on td elements to point to an id that does not exist. The headers attribute should refer to the id of a th in the same table.Here is the corrected code:
How to fix "Misconfigured data table header (WCAG Level A Issue)" issue
<table>
<thead>
<tr>
<th id="product-name">Product Name</th>
<th id="product-price">Price</th>
<th id="product-stock">Stock</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="product-name">Item 1</td>
<td headers="product-price">$10</td>
<td headers="product-stock">In stock</td>
</tr>
</tbody>
</table>In this corrected code, the headers attribute on the td elements correctly refer to the ids of th elements in the same table. This makes the data table markup semantic and understandable by screen readers.
