For "complex" tables, i.e. where tables have structural divisions beyond those implicit in the rows and columns, use appropriate markup to identify those divisions.
Example: A travel expenses worksheet. While the following data table appears simple enough visually, it would be difficult to understand if read by some of today's screen-readers.
TRAVEL EXPENSES (actual cost, US$)
TRIP,
date |
Meals |
Room |
Trans. |
Total |
| San Jose |
|
|
|
|
| 25 Aug 97 |
37.74 |
112.00 |
45.00 |
|
| 26 Aug 97 |
27.28 |
112.00 |
45.00 |
|
| Subtotal |
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 |
|
| Subtotal |
131.25 |
218.00 |
72.00 |
421.25 |
| Totals |
196.27 |
442.00 |
162.00 |
800.27 |
A good way to approximate what some screen-reader users will hear is to hold a ruler to the table, and read straight across the screen. Then, move the ruler down until the next line of characters is displayed. Read straight across. After a while, pick a data cell at random and, without looking at the column or row title, try and remember what headers describe that data point. The larger and more complex the table, the harder it would be to remember the row and column relationships.
Tomorrow's smart browsers or screen-readers will use additional HTML 4.0 markup (TBODY, THEAD, SCOPE, HEADERS, etc.) to "intelligently" decode a table for speech or alternative output. The following code shows one way this table might be marked up to allow the greatest access:
<table border="1" cellpadding="4" cellspacing="0" align="center"><caption>
TRAVEL EXPENSES (actual cost, US$)
</caption>
<thead>
<tr>
<th><p><span id="t1-r1-l1">TRIP</span>,<br />
<span id="t1-r1-l2">date</span></p></th>
<th scope="column">Meals</th>
<th scope="column">Room</th>
<th scope="column">Trans.</th>
<th scope="column">Total</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="rowgroup" headers="t1-r1-l1">San Jose</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td scope="row" headers="t1-r1-l2">25 Aug 97</td>
<td>37.74</td>
<td>112.00</td>
<td>45.00</td>
<td> </td>
</tr>
<tr>
<td scope="row" headers="t1-r1-l2">26 Aug 97</td>
<td>27.28</td>
<td>112.00</td>
<td>45.00</td>
<td> </td>
</tr>
<tr>
<td scope="row">Subtotal</td>
<td>65.02</td>
<td>224.00</td>
<td>90.00</td>
<td>379.02</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="rowgroup" headers="t1-r1-l1">Seattle</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td scope="row" headers="t1-r1-l2">27 Aug 97</td>
<td>96.25</td>
<td>109.00</td>
<td>36.00</td>
<td> </td>
</tr>
<tr>
<td scope="row" headers="t1-r1-l2">28 Aug 97</td>
<td>35.00</td>
<td>109.00</td>
<td>36.00</td>
<td> </td>
</tr>
<tr>
<td scope="row">Subtotal</td>
<td>131.25</td>
<td>218.00</td>
<td>72.00</td>
<td>421.25</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="row">Totals</th>
<td>196.27</td>
<td>442.00</td>
<td>162.00</td>
<td>800.27</td>
</tr>
</tbody>
</table> |
|
www.weather.gov 
