Improve Site Performance Increase Site Traffic Monitor Site Uptime Webmaster Resources NetMechanic Home Looking For Help? Partner Programs Privacy Policy Contact Us Press Room
NetMechanic Home LOGIN | HELP | ABOUT US | PRODUCTS | SITE MAP
NetMechanic Menu
Over 52 Million Web Pages Tested!     
 
Story on designing tables for web accessibility.
Disabled story search bar.
Search for:


Your Email:

I would like to receive my newsletter in:
HTML format
Text format


Tips on designing web access into your site.
Volume 8 (2005)
   September
   June
   April
   March
   January

Volume 7 (2004)
   November
   September
   July
   June
   May
   April
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 6 (2003)
   December
   November (Part 2)
   November
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 5 (2002)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 4 (2001)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 3 (2000)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June
   May
   April
   March
   February
   January

Volume 2 (1999)
   December
   November
   October
   September
   July
   June
   May
   April
   March
   February
   January

Volume 1 (1998)
   December
   November
   October
   September

 

Accessibility Tip:
Designing Accessible Tables Part 1

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

  
August 2001
(Part 2)
Vol. 4, No. 16
 • Accessibility Tip
 • Design Tip
 • Beginner Tip
  

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:

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

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.



Rate This Tip:
Not Useful Useful Very Useful   
 
NetMechanic Tools
HTML Toolbox
Browser Photo
Server Check
Search Engine Starter
Search Engine Tools
GIFBot
Newsletter
HTML Tutorial and Tips
Search Engine Tutorial
Accessibility Information
Browser Problem Tutorial

Company Info
Products
About Us
Contact
Advertise
Link To Us
Jobs
Privacy Policy
Partner Programs
Press Room
RSS Feed
Support
 



Powered by Overture!

 
     
 
   
 
     


Keynote Home
Copyright © 1996-2007,
Keynote NetMechanic
All rights reserved.