Table header IDs
Silktide checks tables that connect their cells to headings using the headers attribute. In these tables, every heading cell needs its own id, or the connections cannot work.
In complex tables - for example, ones with two levels of headings, or cells
spanning several rows - the relationship between a cell and its headings
cannot be worked out from position alone.
solves this with the headers attribute: each data cell lists the id
values of the heading cells that apply to it. That only works if every
heading cell actually has an id.
<!-- Problem: the second heading has no id, so cells cannot reference it -->
<table>
<tr>
<th id="name">Name</th>
<th>Score</th>
</tr>
<tr>
<td headers="name">Ada</td>
<td>98</td>
</tr>
</table>
Why this matters
When a table uses headers associations, a
reads the linked headings out loud before each value, letting the listener keep track of where they are in
a complex table. A heading cell without an id cannot be referenced, so the
cells beneath it are announced without context, and the table becomes
guesswork for anyone who cannot see it.
How to fix it
- Give every
<th>heading cell in the table a uniqueid. - Update each data cell's
headersattribute to list the IDs of all the headings that apply to it, separated by spaces:
<!-- Fixed: every heading has an id and cells reference them -->
<table>
<tr>
<th id="name">Name</th>
<th id="score">Score</th>
</tr>
<tr>
<td headers="name">Ada</td>
<td headers="score">98</td>
</tr>
</table>
- Alternatively, consider simplifying the table. Simple tables with one row
or column of headings do not need
headersassociations at all -<th>cells withscopeattributes are enough, and far easier to maintain.
How Silktide tests this
- Find every table on each page.
- Skip tables where no cell uses a
headersattribute - this check only applies to tables that have opted in to explicit header associations. - In the remaining tables, report every
<th>heading cell that has noidattribute.