How-Tos and Demos
Accessible Tables
Example: A data table with a <caption> element and a summary attribute
| 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 is adapted from Maximum Accessibility by John Slatin and Sharron Rush (Pearson Education, 2003).
The table in this example includes both a <caption> element and a summary attribute. By default, the caption is centered above the first row of the table. The summary does not appear on the screen: it is designed to be spoken by screen readers, and provides instructions to help blind users understand how the table is organized.
How to do it
Code example for <caption> element for a data table 
Rationale
The <caption> makes useful information about the contents of a data table available to all users. For many tables, the caption alone is sufficient. For tables that present complex data or pose special navigation challenges for users who are blind, it may be useful to include a summary attribute in addition, as this example does (remember that the summary does not appear on the screen). Screen readers will then read both the summary and the caption.
How it sounds with the JAWS screen reader
Listen to JAWS reading this form
JAWS transcript
[Table with nine columns and five rows.
Summary: This bus schedule lists selected intersections along the route, followed by the times when the bus stops at each intersection. To plan your trip, locate the intersection closest to where you want to get on the bus. Read down the column till you find the time closest to when you'd like to start your trip. Read across that row to find out when you'll reach the stop closest to your destination.
Schedule for Bus from Downtown]