Table cell points at a header that is not in its table

Why does it matter?

WCAG 1.3.1 asks that a table's structure reaches assistive technology; this cell's headers attribute names something that is not another cell of the same table, so screen readers cannot read out its header.

Who it affects: Screen reader users, who hear the header for each cell as they move through a table.

What does Lumtera flag?

A cell whose headers attribute names something that is not another cell of the same table.

Check ID table-headers-invalid — use it to filter the content report or with wp lumtera issues --rule.

How do I fix it in WordPress?

Make each ID in the headers attribute match the id of a header cell in the same table. In simple tables, remove the headers attributes and use <th> with scope instead.

Example

<td headers="price">€12</td> <!-- no id="price" in this table -->

<th id="price">Price</th> … <td headers="price">€12</td>

How do I check the fix?

1. Update the post. The issue disappears from the Lumtera Accessibility sidebar on the next check, and from the site report on the next scan.
2. With a screen reader, move cell by cell (VoiceOver: Ctrl + Option + arrow keys). Each value should be announced with its column or row header.