how to write accessible html table? - html

Question

A table on my site has been flagged by an accessibility plugin (aXe). After some tinkering, it ended up saying that I had to fix the following two things:
<th> elements should only be used when there is a single row and
single column of headers
Table has cells whose rowspan attribute is not equal to 1
How can I reasonably build a table with nested levels of information without violating at least one of those?
My table code is:
<table>
<tbody>
<tr>
<th scope="col" rowspan="2">Type Of</th>
<th scope="col" colspan="2">Blue</th>
<th scope="col" colspan="2">Green</th>
</tr>
<tr>
<td scope="col" class="centered">Light Blue</td>
<td scope="col" class="centered">Dark Blue</td>
<td scope="col" class="centered">Light Green</td>
<td scope="col" class="centered">Dark Green</td>
</tr>
<tr>
<th scope="row">Type 1</th>
<td class="centered">Y</td>
<td class="centered">Y</td>
<td class="centered">Y</td>
<td class="centered">N</td>
</tr>
<tr>
<th scope="row">Type 2</th>
<td class="centered">Y</td>
<td class="centered">Y</td>
<td class="centered">Y</td>
<td class="centered">N</td>
</tr>
<tr>
<th scope="row">Type 3</th>
<td class="centered">Y</td>
<td class="centered">Y</td>
<td class="centered">Y</td>
<td class="centered">N</td>
</tr>
</tbody>
</table>

Answer 1

Accessibility tools are free to invent their own rules, but this tool is wrong saying you should remove table headers th when you use rowspan or colspan. It's totally wrong. Check that you have the last version of this tool : this is an awful advice.
In your case, you can use the following technique to mark column headers:
H43: Using id and headers attributes to associate data cells with header cells in data tables
Your have one problem in your example:
Your headers in your second line are not marked as column headers (th) (and headers attribute should only reference th with id).
You markup should be something like:
<table>
<thead>
<tr>
<th rowspan="2" id="typeof">Type Of</th>
<th colspan="2" id="blue">Blue</th>
<th colspan="2" id="green">Green</th>
</tr>
<tr>
<th id="lightblue">Light</th>
<th id="darkblue">Dark</th>
<th id="lightgreen">Light</th>
<th id="darkgreen">Dark</th>
</tr>
</thead>
<tbody>
<tr>
<th id="type1" headers="typeof">Type 1</th>
<td headers="type1 lightblue" title="Yes">Y</td>
<td headers="type1 darkblue" title="Yes">Y</td>
<td headers="type1 lightgreen" title="Yes">Y</td>
<td headers="type1 darkgreen" title="No">N</td>
</tr>
<tr>
<th id="type2" headers="typeof">Type 2</th>
<td headers="type2 lightblue" title="Yes">Y</td>
<td headers="type2 darkblue" title="Yes">Y</td>
<td headers="type2 lightgreen" title="Yes">Y</td>
<td headers="type2 darkgreen" title="No">N</td>
</tr>
<tr>
<th id="type3" headers="typeof">Type 3</th>
<td headers="type3 lightblue" title="Yes">Y</td>
<td headers="type3 darkblue" title="Yes">Y</td>
<td headers="type3 lightgreen" title="Yes">Y</td>
<td headers="type3 darkgreen" title="No">N</td>
</tr>
</tbody>
</table>
Also, I added a title attribute in order to add a speakable alternative for screen readers (you could have used aria-label but title adds a tooltip for other people, except it is not keyboard friendly). Better choice would be to have here a full word.

Answer 2

I'm not sure what tool you are using, but have you tried using col and colgroup elements? There is some basic information here from W3C about irregular headers in data tables.
Also, I put together a quick JSFiddle based on your table if you want to look at that: https://jsfiddle.net/dngvc84o/