What does this accessibility issue mean?
Accessibility issue summary: table header elements without accessible text
If table header elements (defined with <th> tags in HTML) do not have accessible text, it can cause confusion for users who rely on assistive technology to understand the structure of the table.
Solution:
Ensure table headers have discernible text.
Example HTML violation: Indiscernible table heading (A11y Best Practice Violation)
<table>
<tbody>
<tr>
<th>Product</th>
<th></th>
</tr>
<tr>
<td>Product A</td>
<td>$10</td>
</tr>
<tr>
<td>Product B</td>
<td>$20</td>
</tr>
</tbody>
</table> This HTML is violating the accessibility rule, because the second column of the table doesn't have a text in its header, which makes it indiscernible.
To resolve this issue, we could add a descriptive text to the header of the second column like this:
How to fix "Indiscernible table heading (A11y Best Practice Violation)" issue
<table>
<tbody>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Product A</td>
<td>$10</td>
</tr>
<tr>
<td>Product B</td>
<td>$20</td>
</tr>
</tbody>
</table>Here Product and Price are the headers for the respective columns, making it clear what each column's data represents. This is essential for screen reader users for instance, to understand the context of the table's data.
