How-Tos and Demos
Accessible Tables
Example: Associating data cells and header cells in a complex table
| Northbound | ||||||||
|---|---|---|---|---|---|---|---|---|
| 6th & Con | 11th & Con | 12th & Lav | 15th & Lav | MLK & Lav | 24th & Gua | 28th & Gua | 32nd & Gua | 32nd & Rio |
| 10:33am | 10:36am | 10:42am | 10:45am | 10:50am | 10:55am | 11:03am | 11:11am | 11:17am |
| 10:48am | 10:51am | 10:57am | 11:00am | 11:05am | 11:10am | 11:18am | 11:26am | 11:32am |
| 11:03am | 11:06am | 11:12am | 11:15am | 11:20am | 11:25am | 11:33am | 11:41am | 11:47am |
This sample bus schedule comes from Maximum Accessibility by John Slatin and Sharron Rush (Pearson Education, 2003). The table includes markup to associate data cells with the appropriate column headers. Screen readers can report these associations to users who are blind. This can make the difference between a table that makes sense and one that is unusable.
How to do it
Code Example for associating data cells and header cells 
Rationale
Sighted users can quickly make sense out of a schedule or other table by skimming over it and looking at how it is laid out. In the bus schedule shown here, sighted users would quickly see that the top row identifies the direction in which the bus travels (northbound), while intersections are listed across the second row and the rest of the table shows the times when the bus should reach each intersection. They can find out where the bus will be at a given time by glancing up to the top of the column to check the name of the intersection. People who use screen readers must listen to the schedule, however, without access to information provided by such visual cues. Schedules like this one quickly become confusing. And without proper markup to associate times (shown in the data cells) with intersections (shown in header cells), the schedule would become utterly useless.
Creating an association between a header cell and a data cell is similar to creating an association between a label and a form control. First, the header cells (in this example, these are the <th> elements that indicate the direction and list the intersections) must be given unique id attributes, like this:
<th id="dir">Northbound</th>
Then each data cell (<td> element) must be given a headers attribute. The headers attribute contains a list of the id attributes for the header cells that will be associated with the data. In our example, we wanted to associate each time-point with two headers: the direction and the name of an intersection.
<td headers="dir int1">10:33</td>
The code example will show you what the whole table looks like. Note that some authoring and accessibility tools are beginning to provide support for these complex associations.
How it sounds with the JAWS screen reader
Listen to JAWS reading this table
JAWS transcript
[Sixth and Congress Avenue. Row two. (JAWS expands the on-screen abbreviation) (User presses the key combination to move one cell right)
Northbound. Eleven th and Congress Avenue. Column two. (User presses the key combination to move one cell down)
Northbound. Ten thirty six a.m. Row three. (User presses key combination to move one cell down)
Northbound. Ten fifty one a.m. row four. (User presses the key combination to move one cell right)
Twelve th and Lav. Ten fifty seven a.m. Column three. (User presses key combination to move one cell to the right)
Fifteen th and Lav. Eleven zero zero a.m. Column four. (User presses key combination to move one cell to the right)
MLK and Lav. Eleven zero five a.m. column five.]
Note: JAWS 4.5x does not support abbreviations when reading associated table headers