I am adding a subheader row to a table. There is a row of header elements that each span one column. Then there is a second row that spans the total number of header elements. This is the subheader. Then there are data rows below that subheader that are described by both the header and subheader cells.
Example:
<table>
<thead>
<tr>
<th id="header-1" scope="col">Header 1</th>
<th id="header-2" scope="col">Header 2</th>
<th id="header-3" scope="col">Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<th id="sub-header-1" colspan="3" scope="colspan">Subheader 1</th>
</tr>
<tr>
<td headers="header-1 sub-header-1">11</td>
<td headers="header-2 sub-header-1">22</td>
<td headers="header-3 sub-header-1">33</td>
</tr>
<tr>
<th id="sub-header-2" colspan="3" scope="colspan">Subheader 2</th>
</tr>
<tr>
<td headers="header-1 sub-header-2">12</td>
<td headers="header-2 sub-header-2">23</td>
<td headers="header-3 sub-header-2">34</td>
</tr>
</tbody>
</table>
I am basing my design off of the W3 multi level table headers example.
When I run the pa11y accessibility scanner against my table, it shows an error. It is stating that for a table cell, it needs to be assigned the header cell id and all subheader ids.
I ran pa11y against the W3 example as well and got a very similar error.
It doesn’t make sense to me that a table cell should have the header ids from ALL the subheader rows, just the subheader row it is under. Am I missing something?