back to CanAdapt home

1: 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

  Exams Projects
  1 2 Final 1 2 Final
Year 2014 15% 15% 20% 10% 10% 15%
Year 2015 20% 20% 10% 15% 20% 15%

Source

<table border="1">
<tr>
<td >&nbsp;</td>
<th colspan="3" scope="col">Exams</th>
<th colspan="3" scope="col">Projects</th>
</tr>
<tr>
<td width="29">&nbsp;</td>
<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>

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.


2: Headers and ID

Example 2

Homework Exams Projects
1 2 Final 1 2 Final
15% 15% 15% 20% 10% 10% 15%

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>


3: Big Table with no scope and no headers and ids

Degrees in the biological and biomedical sciences compared with degrees in technology conferred by degree-granting institutions, by level of degree and sex of student: Selected years, 2002-2006.

 Bachelor's Degrees Master's Degrees Doctor's Degrees
BiologyTechnology BiologyTechnology BiologyTechnology
MaleFemaleMaleFemaleMaleFemale MaleFemaleMaleFemaleMaleFemale
Totals127,385206,168200,70759,975 16,74823,52664,72626,62914,607 13,4354,6381,217
200222,91837,18641,95015,483 2,9814,00913,2676,242 2,8042,289648168
200323,24838,26144,58514,903 3,2274,43013,8686,275 2,8042,438709200
200424,61739,99442,12511,986 3,3184,88113,1365,280 2,8452,733905214
200526,65142,52737,7059,775 3,6545,02712,4704,585 2,9332,8421,109307
200629,95145,20034,3427,828 3,5685,17911,9854,247 3,2213,1331,267328

Data from Institution of Education Sciences National Center for Education Statistics, derived from two tables: Table 298. Degrees in the biological and biomedical sciences conferred by degree-granting institutions, by level of degree and sex of students; selected years, 1951-52 through 2006-07 and Table 302. Degrees in computer and information sciences conferred by degree-granting institutions, by level of degree and sex of student: 1970–71 through 2006–07.


4: Complex Table

Availability of holiday accommodation
Studio Apt Chalet Villa
Paris
1 bedroom 11 20 25 23
2 bedroom - 43 52 32
3 bedroom - 13 15 40
Rome
1 bedroom 13 21 22 3
2 bedroom - 23 43 30
3 bedroom - 16 32 40

Results

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

  FF35.0.1/JAWS16 IE11/JAWS16 CHROME40/JAWS16 FF35.0.1/NVDA2015.1 IE11/NVDA2015.1 CHROME40/NVDA2015.1 VoiceOver in Safari VoiceOver in Chrome
1 Table without headers and id's

Works

Works Works Works doesn't work

doesn't work

doesn't work doesn't work
2: Headers and ID

Works

Works

Works

Works

Reads only top row

doesn't work

Top row headers only read

doesn't work

3: Big Table with no scope

Works

Works

Works

Works

doesn't work

doesn't work

Top row headers only read

doesn't work

4: Complex Table with Headers and ID Works Works Works

Works

(but moving into the Rome column Paris is read as it's header)

doesn't work doesn't work Did not work Did not work