Multi-Column Layout

Older screen readers had trouble reading tables, but this is not a problem for newer screen readers. See the tips section for information on how to make formatting tables more accessible

This Page

Older Screen Readers and Multi-Column Formats
Is CSS better than TABLE?
Tips for Implementing Formatting Tables
Reading Order Issues (Linearization)
CSS Options

Synopsis

Layouts with multicolumns are accessible to modern screen readers, but you must ensure that the flow of the text is coherent.
You can use TABLEs for layout, but note that cells are read left to right, top to bottom. You do not need to include data table accessibility tags such as TH and SCOPE.
CSS formatting is often preferred, but you must ensure that positioning is not used to place elements out of order so that text becomes incoherent when CSS is disabled.

Older Screen Readers and Multi-Column Formats

Older screen readers used to not recognize columns (whether they were in TABLEs or formatted with CSS). Instead they would read the text on the page left to right as if it were linear, causing text to be read out of order

For this reason, some accessibility experts in the past strongly discouraged the use of multiple column layouts, then mostly implemented with formatting tables.

NOTE: Some screen reader software packages, such as JAWS, allows users to enter tables reading mode, but some users may not be aware that this feature exists.

Is CSS better than TABLE?

For accessessibility, the difference is actually minimal. The main advantage of using CSS over TABLEs is that there is usually less code, making maintenance much easier.

However, you can cause accessibility glitches with CSS if the positioning is not properly implemented. There are also inconsitencies in how CSS is rendered across browsers.

If you cannot find a CSS solution wthich

Some experts recommend using CSS styled DIV to set up layouts, but there are a number of serious pitfalls to be wary of. If in doubt, a layout table may be a better solution in the short term. It is not currently a part of Section 508 policy that all formatting tables be eliminated, just that they be accessible.

Benefits

Screen readers do not announce the number of cells for DIVs.
There are more formatting options available.
Code is less bloated.

Pitfalls

Floating DIVS may place content out of order for screen readers.
It will probably not resolve the issue of multiple column layouts for older screen readers.
Implementation of CSS varies widely between browsers, so any desigm must be tested on multple browsers. This problem has been lessening over time.
Section 508 requires that content be readable with stylesheets disabled. Test to see that your site makes logical sense if CSS is disabled.

Section 508 - Documents shall be organized so they are readable without requiring an associated style sheet.

Tips for Implementing Formatting Tables

Make sure your text makes sense when read cell-by-cell, row-by-row, starting from the upper left and ending in the lower right. This is the default reading order of table cells for screen readers.
If one of the columns is used for navigation, implement a Skip Navigation strategy so that users can navigate into content and skip repeating a set of site navigational links.

SECTION 508 - A method shall be provided that permits users to skip repetitive navigation links.
When using a table for formatting, you do not need to use the TH, SCOPE, CAPTION tags. These are only used for data tables.
You can use the SUMMARY tag to indicate to screen reader users that the table is being used for layout purposes.
Avoid using tables to create "textbars". CSS has more formatting options for this and generates cleaner code.
Avoid nesting tables for visual effect. Screen readers read out the number of rows and cells for each table, so the fewer tables, the better.
Whenever possible, set column and table widths to relative sizes (e.g. width="25%") rather than absolute sizes (e.g. width="200"). This way, tables can be adjusted to fit the screen more appropriately depending on monitor resolution or zoomed text.
NOTE: Some users deliberately set their monitors to a lower resolution (e.g. 800 x 1200 or 640 x 400) as a way to increase text size in general.
Some formatting tables can be avoided by using cascading style sheets to specify background colors and borders for elements such as an H1 tag or a DIV class.

Reading Order Issues

As mentioned above, the default reading order of table cells is left to right, top to bottom as shown in the example table below.

Example Table

Table Showing Screen Reader Order
Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6
Cell 7	Cell 8	Cell 9

It's important that, when using tables for formatting, the text be coherent when read in cell table order. See the following example for details.

Inaccessible Table Reading Order

Here's a table with "3 2 1 Ignition" going from the lower left to the upper right.

			Ignition!
		1
	2
3

Users of visual browsers would process the text as "3 2 1 Ignition", but because of how the table is laid out, a screen reader would say "Ignition 1 2 3."

Top of Page

CSS Options

See the CSS page for options relating to multiple column layout and links to tutorials.

The Divs Resembling Tables shows some options for adding borders and background colors with more control than in HTML Tables. The Inaccessble CSS section shows how CSS can be used to position text out of logical order.