Designing Accessible Tables

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.

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.