How-Tos and Demos

Accessible Tables

Example: A data table with a summary attribute

The table below includes a summary which is spoken by screen readers though it is not visible on the screen.

 

This sample bus schedule comes from Maximum Accessibility by John Slatin and Sharron Rush (Pearson Education, 2003). People using screen readers will hear instructions on how to use the schedule, but these instructions are not visible on the screen.

 

How to do it

Code Example for Summary attribute for a data table

 

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 example above, sighted users would quicly see that intersections are listed across the top row while the rest of the table shows the times when the bus should reach each intersection. People who use screen readers must listen to one cell at a time, however, without access to information provided by cues such as visual groupings, colors, fonts, etc. The summary attribute makes much of this information available to people using screen readers, saving them the time it would take to listen to several rows and figure out for themselves how the schedule is organized. In other words, the summary attribute is like alt text for a table: the summary provides off-screen information about the table; this information is spoken by screen readers and makes the table easier to understand.

 

How it sounds with the JAWS screen reader

Listen to JAWS reading this table

 

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]

 

Applicable Accessibility Standards and Guidelines

• Section 508 Requirements and WCAG 1.0 Checkpoints for Tables