by Larisa Thomason,
Senior Web Analyst,
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.