Accessibility Tip:
Designing Accessible Tables Part 1

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

To understand table data, you have to know how the individual cells fit into the overall table content. A quick glance at the Web page is usually all the orientation a sighted visitor needs, but people with visual disabilities need more. With just a few changes, you can make your tables accessible to all visitors. In this two-part series, we'll show you how.

Using Data Tables

Data tables represent logical relationships among data (called tabular data) in a two-dimensional grid format much like a spreadsheet. Look at this data table from the OpenSecrets.org Web site:

While you may have a pretty good idea that it pertains to campaign fundraising, you don't know for sure what is included in the totals or the calendar period the totals represent. You can guess, but without a title or some sort of descriptive text, you don't know for sure.

People who use screen readers and other assistive technologies run into this problem all the time. Nobody would forget to display titles and other important information on the screen, but plenty of designers neglect to include auditory cues in the table's code.

By simply including table summary data and labeling your table elements (columns and rows), you can make the browsing experience more pleasant for everyone.

Caption And Summary Elements

The solution is simple: use CAPTION or SUMMARY element to summarize table contents. The CAPTION displays on the Web page. SUMMARY doesn't display in the browser, but screen readers will read the content aloud.

Add them like this:

The caption displays directly above the table, like a title. Visitors with visual browsers won't see the summary unless they look at your source code, but screen readers will read it aloud before reading the table's contents.

Use Your Header

So now everyone understands the purpose of the table, but can they understand the actual content? They can if you label your table elements. Remember that table cells can contain two kinds of information - header information and data.

Think of header information as the column titles. Use the TH element to define cells that contain header information. Name each header cell using the ID attribute.

Using the previous table example, your HTML code should look something like this:

If you were listening to the table read aloud, you'd hear:

"This table lists amount of money raised and spent by the major party candidates in the 2000 U.S. Presidential election"

"Candidate: George W. Bush    Amount Raised: $193,088,650   Amount Spent: $185,921,855"
"Candidate: Al Gore       Amount Raised: $132,900,252   Amount Spent: $120,371,857"

The table header attribute is often rendered in bold face type in browsers. Screen readers give the content a slightly different voice inflection to distinguish the headers from the content. We put it in italics to show the difference.

Avoid Excessive Repetition

This table is small, so there isn't much repetition, but suppose you were presenting the total contribution and spending data for a dozen candidates? Visitor will quickly tire of hearing "Amount Raised" and "Amount Spent" repeated over and over.

That's where the ABBR attribute comes in. Include it with any long ID attributes. Screen readers will say the entire title aloud the first time, but use the abbreviation on all subsequent rows. In this table, you could shorten "Amount Raised" to "Raised" and "Amount Spent" to "Spent" like this:

That small bit of effort makes all the difference to a visitor using assistive technologies to access your page.

Data tables are only half the story. Tables are more commonly used for page layout - even though designers are supposed to be using CSS instead. But developers have been spooked by CSS browser compatibility issues, so the majority still rely on tables.

In Part 2, we'll learn how to make those layout tables more accessible.