Data Table Accessibility

TABLEs that are used for data should include a summary and/or a CAPTION (table title), appropriate headings and structural tags (TH) to indicate those headings. The scope attribute should be used on the TH tags to indicate whether the cell is a column heading (scope="col") or a row heading (scope=row").

Examples:

Taken from: Accessible Tables at www.jimthatcher.com

Syntax for adding SUMMARY, CAPTION and TH to tables

Coffee consumption
Name Cups
L. Smith 10
J. Allan 5
B. Jones 2.5

<table border="1" summary="Number of cups of coffee consumed by each person." >
<caption >Coffee consumption</caption>
<tbody>
<tr>
<th scope="col">Name</th>
<th scope="col">Cups</th>
<tr>
<td>L. Smith</td>
<td>10</td>
</tr>
......
</tbody>
</table>

Try it:

Add CAPTION and/or summary, and TH/scope to the following table.

Shoe size and Favorite color of webmasters

Name Shoe size Favorite color
L. Smith 10 Camouflage
J. Allan 12.5 Pastel Navy Blue
B. Jones 6 Plaid

Table with two or more logical levels

Syntax of headers/id attributes

<table border="border" width="65%" cellpadding="5" >
<tbody>
<tr>
<td></td>
<th id="col2">Meals</th>
<th id="col3">Hotels</th>
<th id="col4">Transport</th>
<th id="col5">subtotals</th>
</tr>
<tr>
<th id="row2">San Jose</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th id="row3">25-Aug-97</th>
<td headers="col2 row2 row3">37.74</td>
<td headers="col3 row2 row3">112.00</td>
<td headers="col4 row2 row3">45.00</td>
<td></td>
...
</tbody>
</table>

Try it.

Add id's and headers to some of cells in this table. Then try it with JAWS or HPR.

Meals Hotels Transport subtotals
San Jose
25-Aug-97 37.74 112.00 45.00
26-Aug-97 27.28 112.00 45.00
subtotals 65.02 224.00 90.00 379.02
Seattle
27-Aug-97 96.25 109.00 36.00
28-Aug-97 35.00 109.00 36.00
subtotals 131.25 218.00 72.00 421.25
Totals 196.27 442.00 162.00 800.27

back to Table Hands-on

Hands-on Navigation

Here is the list of links to Hands-On examples.