Skip to main content

30 steps to a more accessible website

Step 20: Providing a summary for tables

The final piece of marking up tables is providing a summary. The summary of a table is never displayed in visual browsers; it is exclusively designed for screen readers and speech browsers. It is exactly what it sounds like: a summary, a longer description than the caption. It is usually read immediately before the caption.

Every table should have a summary. If you have a calendar, the summary can be as simple as "Monthly calendar with links to each day's posts." If you use tables for layout, you should give each of those tables an empty summary, to indicate that the table is used exclusively for visual layout and not for presenting tabular data. (This is a similar concept to providing an empty ALT attribute on images used exclusively for visual spacing. We'll discuss these "spacer images" in step 21.)

Who benefits?

  1. Jackie benefits. When JAWS encounters your calendar, Jackie hears "Summary: Monthly calendar with links to each day's posts." Then she hears the caption, then she hears the table headers, then she can navigate through the calendar.
  2. iCab users benefit. iCab can use the built-in text-to-speech capabilities of the Mac OS to read web pages, and it will read the summary of any table that defines one.

How to do it: calendar

How to do it: layout tables

If you use tables for layout, add summary="" to each table. This is best accomplished with search-and-replace. Search for this:

<table

And replace it with this:

<table summary=""

« Step 19: Using real table headers | Contents| Step 21: Ignoring spacer images »

This guide is adapted from Dive Into Accessibility by Mark Pilgrim and is shared with the GNU Free Documentation License v1.1