I’m trying to make a website I’m working on meet accessibility requirements. I’ve checked it at https://achecker.ca/checker which complains about all the
<td> elements in my tables not having id and header attributes. The message from the checker was:
Check 245: Data table with more than one row/column of headers does not use id and headers attributes to identify cells. Repair: Add id and headers attributes to table cells so they identify the cells that relate to the headers.
This implies that each
<th> element should have an id attribute and each
<td> should have a header attribute pointing to the relevant
<th> elements. This method is described in https://www.w3.org/TR/WCAG20-TECHS/H43.html
I have already specified a scope for all the header elements in accordance with https://www.w3.org/TR/WCAG20-TECHS/H63.html so I wouldn’t have expected it to be necessary to include header tags in the
<td> elements as well, especially since the notes in H63.html suggest that for simple tables that have the headers in the first row or column then it is sufficient to simply use the
<th> elements without scope and only suggests that the extra id and header attributes required in H43.html should be used in more complex tables.
Here’s a simplified pruned down example of one of my tables:
<table> <caption>Full council Meetings in 2020</caption> <thead> <tr> <th scope="col">Meeting date</th> <th scope="col">Agenda</th> <th scope="col">Minutes</th> <th scope="col">Attachments</th> </tr> </thead> <tbody> <tr> <th scope="row">Jan 9th 2020</th> <td><a href="http://www.example.com/Agenda-Januray.pdf">view</a></td> <td><a href="http://www.example.com/Minutes-January.pdf">view</a></td> <td> </td> </tr> <tr> <th scope="row">Feb 13th 2020</th> <td><a href="http://www.example.com/Agenda-February.pdf">view</a></td> <td><a href="http://www.example.com/Minutes-February.pdf">view</a></td> <td><a href="http://www.example.com/Attachments-February.pdf">view</a></td> </tr> </tbody> </table>
This leads me to wonder if the accessibility checker is being over pedantic?
I could easily add the header tags if needed but I’m reluctant to add extra bloat if it’s not needed.