How-Tos and Demos
Accessible Tables
Example: Identifying Column and Row Headers
This table is part of a class syllabus. It includes column headings for the date,topic, readings, and assignments that are due. Each date listed is defined as a row header.
| Date | Topic | Reading | What's due |
|---|---|---|---|
| September 10 | Blindness & personal narrative | Mehta, Sound Shadows, Chs. 1-7 | Post Reading Response and Journal of Mouseless Week to Forum |
| September 12 | Equivalent alternatives | MaxAccess, chs. 7&9; checkpoints and standards addressed in these chapters. | Place completed ALT text exercises in Teacher Folder |
| September 17 | Blindness: orientation & mobility | Mehta, Sound Shadows, Chs. 8-end; Slatin, Dillon Chronicles (online) | Sound Shadows 2 Reading Response to Forum |
| September 19 | Orientation & navigation on the Web | WCAG 1.0 Guideline 3  (all checkpoints); Guideline 12 , Guideline 13 , esp. Checkpoints 13.4 and13.6; Section 508 paragraphs (i) and (o) |
Skip navigation, orientation, markup exercises to Teacher Folder |
How to do it
Code example for identifying column and row headers
Rationale
The key to accessible data tables is to enable people who can't see the screen to understand the meaning of each data cell according to its location in the table. In this example, we use the <th> element to identify all the column headers (each cell in row 1 is a column header). We used the same method to identify the first cell in each row as a row header. We also used the scope attribute to make it easier for people using screen readers to recognize the difference between row and column headers. This makes it possible for them to understand the data .
This technique should not be used for layout tables. (Layout tables are used only to control the placement of visual elements such as navigation bars and images. In a data table, by contrast, the meaning of each item is determined by its position in the table (for example in Row 3, column 2).
How it sounds with the JAWS screen reader
Listen to JAWS read a data table with table-navigation keys
JAWS transcript
[Table with four columns and five rows.
Summary: September tenth through September nineteenth
Blindness and Visual Impairments.
Date.
September tenth. Row two.
September twelfth. Row three.
Topic. Equivalent alternatives. Column two.
Reading. Maximum Accessibility, Chs. seven and nine; checkpoints and standards addressed in these chapters. Column three.
What's due. Place completed alt text exercises in teacher folder. Column four.]