No data cells assigned to table header?

Sarah Bryant

We use SiteImprove to scan our site for accessibility issues and it's flagging our DataTables because of "no data cells assigned to table header". What we're seeing in the page code is that the one table we created in our Drupal CMS, is being rendered as two separate tables (one for the headers and one for the data). The first table has only table headers and no associated data cells. Has anyone encountered this and have a fix? Right now we're looking at hiding the table header from screen readers as a workaround.

Code:

<div id="DataTables_Table_0_wrapper" class="dataTables_wrapper no-footer">
<div id="DataTables_Table_0_filter" class="dataTables_filter">
<label>
<span class="xyz">Search this table</span>
<input type="search" class placeholder="Filter results" aria-controls="DataTables_Table_0">
</div>
</label>
<div class="dataTables_scroll">
<div class="dataTables_scrollHead" style="overflow: hidden; position: relative; border: 0px; width: 100%;">
<div class="dataTables_scrollHeadInner" style="box-sizing: content-box; width: 970px; padding-right: 0px;">
<table>
<thead>
<tr>
<th>Date</th>
<th>Alert</th>
</tr>
</thead>
</table>
</div>
</div>

<div class="dataTables_scrollBody" style="position: relative; overflow: auto; max-height=px; width: 100%;">
<div class="dataTables_scrollHeadInner" style="box-sizing: content-box; width: 970px; padding-right: 0px;">
<table>
<thead>
<tr>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>12/20/2323</td>
<td>Alert</td>
</tr>
</tbody>
</table>
</div>
</div>

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Colin

allan

You have scrolling enabled. Because of how DataTables has to implement the scrolling (splitting it across three tables to keep the header and footer static) it can cause accessibility issues. The only solution is to disable the scrollX / scrollY options.

Allan

Sarah Bryant

Thank you Colin and Allan. I will take this back to the developers.