1

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 headers 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 headers 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>&nbsp;</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.

1

That check seems ambiguous. It says “more than one row/column of headers”. If you have one row and one column of headers, as here, does that check apply? Not clear.

In any case, the standard algorithm for inferring header scope makes the th cells in the top row column headers and other th cells row headers. I believe there is no argument for treating your table as noncompliant, even if you omit the scope attributes entirely.

That said, in my testing most screen readers misinterpret header scope in some situations, even when the table is simple, whether or not scope or headers attributes are used. Where tables are complex (such as with row groups and row subgroups), the treatment by screen readers is so horrible that the only way to create a good experience is to offer an alternate format in addition to a table.

| improve this answer | |
  • Thanks @Jonathan Pool This is the first time I've been involved in making a site compliant with accessibility requirements and I don't have access to any screen reader software so your reply helps me to be confident that the pages should be compliant. Although the page in question has over 30 tables they are all fairly small and have the same structure as the example in my original post so, in the absence of any replies to the contrary, I'll work on the assumption that the current design with just the scope attributes should be adequate. – Mikec Aug 10 at 10:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.