WCAG 1.0 Double A Checkpoint 5.3

Skip Quick Links

“Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a linearized version). ”

Authors should use style sheets for layout and positioning. However, when it is necessary to use a table for layout, the table must linearize in a readable order. When a table is linearized, the contents of the cells become a series of paragraphs (e.g., down the page) one after another. Cells should make sense when read in row order and should include structural elements (that create paragraphs, headings, lists, etc.) so the page makes sense after linearization.

Also, when using tables to create a layout, do not use structural markup to create visual formatting. For example, the th (table header) element is usually displayed visually as centered and bold. If a cell is not actually a header for a row or column of data, use style sheets or formatting attributes of the element.

Table Linearization

There is a 30% chance of
rain showers this morning, but they
should stop before the weekend.
Classes at the University of Wisconsin
will resume on September 3rd.

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. A screen reader might interpret this as:

“There is a 30% chance of Classes at the University of Wisconsin rain showers this morning, but they will resume on September 3rd. should stop before the weekend.”

You can check to see if an existing layout table is linearized by using the WAVE validation checker at dev.wave.webaim.org/index.jsp. This will list the table cells numerically, in the order they are read.

Preferred Approach

Eliminate the use of tables for layout. Tables should properly be used only for displaying rows and columns of data that have a logical relationship to one another.

Eliminating tables for layout means adopting CSS Positioning for layout. This is another method of separating document display markup from document structure. Refer to the CSS section of this site for further information.

Tip icon Hint: To get a better understanding of how a screen reader would read a table, run a piece of paper down the page and read your table line by line.

Reference

Tables for Layout

Linearizing Tables