back to CanAdapt home

Test table without headers and id's

Headers are a pain for developers, prone to error, and hard to test. Even an automatic checker can miss mistakes. I was wondering if headers and ids are really necessary on tables with "clean" merged fields, meaning that there is a clear path from the data cell to it's corresponding header, and scope is added.

Example 1

Source

<table border="1">
<tr>
<th >&nbsp;</th>
<th colspan="3" scope="col">Exams</th>
<th colspan="3" scope="col">Projects</th>
</tr>
<tr>
<th width="29">&nbsp;</th>
<th width="29" scope="col">1</th>
<th width="29" scope="col">2</th>
<th width="52" scope="col">Final</th>
<th width="34" scope="col">1</th>
<th width="33" scope="col">2</th>
<th width="46" scope="col">Final</th>
</tr>
<tr>
<th scope="row">Year 2014</th>
<td scope="col">15%</td>
<td>15%</td>
<td>20%</td>
<td>10%</td>
<td>10%</td>
<td >15%</td>
</tr>
<tr>
<th scope="row">Year 2015</th>
<td>20%</td>
<td>20%</td>
<td>10%</td>
<td>15%</td>
<td>20%</td>
<td >15%</td>
</tr>
</table>

Accessibility Support technology used

Comments

On Windows, providing only scope on the table for AT, the table works without headers and ids. VO doesn't, but VoiceOver doesn't work even with headers and ids (see below). Now if in Example 1, I had put the word year as a col header for those row headers, in cell 1/1 or 1/2 I would have had to use headers/id's, because there is no clean "view" of that header from it's related cells.

Headers and ids are a pain for developers... it seems like in these types of tables they are not necessary.

Now lets try it with header and ID

Example 2

Code for example 2

<table border="1">
<tr>
<th width="73" rowspan="2" id="h">Homework</th>
<th colspan="3" id="e">Exams</th>
<th colspan="3" id="p">Projects</th>
</tr>
<tr>
<th width="29" id="e1" headers="e">1</th>
<th width="29" id="e2" headers="e">2</th>
<th width="52" id="ef" headers="e">Final</th>
<th width="34" id="p1" headers="p">1</th>
<th width="33" id="p2" headers="p">2</th>
<th width="46" id="pf" headers="p">Final</th>
</tr>
<tr>
<td headers="h">15%</td>
<td headers="e e1">15%</td>
<td headers="e e2">15%</td>
<td headers="e ef">20%</td>
<td headers="p p1">10%</td>
<td headers="p p2">10%</td>
<td headers="p pf">15%</td>
</tr>
</table>

Accessibility Support technology used

Comments

On VoiceOver, headers and IDs don't help or change anything. The second layer of headers doesn't work no matter what.