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

 
Updated 9 Jan 2002

Accessibility Tip:
Designing Accessible Tables Part 2

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

  
September 2001
Vol. 4, No. 17
 • Accessibility Tip
 • CSS Tip
 • Promotion Tip
  

Web sites that use tables to control layout often look great and are easy to interpret visually. Still, the complex structure of some layout tables causes problems for visitors using assistive technologies like screen readers. Carefully structure your layout tables and add navigation cues to make them accessible to all visitors.

Some Text Gets All Wrapped Up

Some older screen readers don't understand word wrapping and read through table cells line by line - like you might read a page in a book. When two cells are side by side on a Web page, the screen reader would read the first line of Cell 1, the first line of Cell 2, the second line of Cell 1, and so on.

Think how that might affect this simple two-celled table:

Adults should eat lots of fruits, grains,and vegetables each day. School Age Children
Growing children need a diet rich in calcium and protein.

A visitor using very old technology would hear this rather scary dietary recommendation:

"Adults should eat lots of fruits, School Age Children grains, and vegetables each day. Growing children need a diet rich in calcium and protein.

Fortunately, the more recent screen readers and browsers won't make this mistake. But remember that disabled people often use a mixture of different assistive technologies and keep using old equipment to avoid high replacement costs.

Think In Linear Terms

The newer versions of screen readers and text browsers don't have the word wrapping problem. Instead, you're far more likely to encounter problems with linearization. It's a term so new that most webmasters - and spell checkers - have never heard of it.

Linearization is the table rendering process used by screen readers and text browsers to convert table cells into a series of paragraphs that will be read one after the other in the order they're defined in the HTML code. Some Web pages may be almost unintelligible after they've been linearized.

The problem lies in the table's HTML code structure. When the screen reader linearizes the table, it reads all the text in the first cell of row one, the second cell, the third, and so on until it runs out of cells. Then, it reads the first cell of row two, the second, etc. This is a perfect sequence for tabular data - especially if you've optimized the table for accessibility - but it doesn't work as well for layout tables.

That's because the structure of layout tables is usually much more complex - with cells used for banners, navigation, content, images, etc.

Find Linearization Problems

Does your page have a linearization problem? There are several ways to find out:

  • Check it yourself. Set the table borders to display, print out the page, put a ruler under the first line of the page, and read it aloud, cell by cell.

  • Let Tablin Analyze It. Tablin is a table linearization tool developed by the WAI Evaluation and Repair group. It analyzes your tables then shows you on screen how a screen reader might organize the cells. Note: the tool is a little buggy; don't be surprised if you have problems getting it to analyze some pages.

  • Check it with a real screen reader. You can download an evaluation copy of JAWS for free and use it to check your pages. But note that the evaluation copy only works for the first 15 minutes after you turn on your PC. If you plan to use it for serious testing, you'll want to purchase the full version.

Whatever method you use, you'll often find that you go through quite a few cells before ever getting to the actual table content - which presumably is what your visitors want to hear the most. Or, if you have navigation links in separate cells, your navigation structure might not make sense at all when read linearly.

Provide Quick Access To Content

If you aren't exactly thrilled with the idea of tearing apart every page in your site to correct linearization problems, then relax. There is a relatively simple workaround that gives disabled people easier access to the content they want without ruining your visual design.

Create anchor tags to mark where page content begins and where your text navigation links begin. Then place links at the top of your page - use a text link or a single-pixel gif - to give visitors the option to skip directly to the main content or navigation sections.

The anchor tag for navigation might look like this:

<a name="navigation">navigation text or image</a>

Then at the top of the page, you'd put:

<a href="#navigation">Skip to navigation links</a> 

If you don't like the look of the text links, use single-pixel gifs to add the links. They'll be invisible to most visitors, but easily accessible to visitors using screen readers. This method isn't a complete fix, but you can use it to quickly make existing pages more accessible.

Pages That Work For Everyone

Consider how your pages will linearize when you design them. When you design pages that everyone can access, your benefits include better code, more customers, and a bigger audience.

Remember that people with disabilities represent a large potential audience, but they aren't the only audience. People who use emerging technologies like Web appliances, Palm Pilots, and other text-dependent display methods will appreciate your efforts too.

NetMechanic's HTML Toolbox will help you find other coding problems that can affect your page display. Use it to measure your page load time, check for broken links, do basic accessibility testing, and flag browser compatibility problems.



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-2010,
Keynote NetMechanic
All rights reserved.