F49:
Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized

Important Information about Techniques

See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.0 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.0.

User Agent and Assistive Technology Support Notes

Description

Although WCAG 2 does not prohibit the use of layout tables, CSS-based layouts are recommended in order to retain the defined semantic meaning of the HTML table elements and to conform to the coding practice of separating presentation from content. If a layout table is used, however, it is important that the content make sense when linearized.

This failure occurs when a meaningful sequence of content conveyed through
presentation is lost because HTML tables used to control the visual
placement of the content do not “linearize" correctly. Tables present
content in two visual dimensions, horizontal and vertical. However, screen
readers present this two-dimensional content in linear order of the content
in the source, beginning with the first cell in the first row and ending
with the last cell in the last row. The screen reader reads the table from
top to bottom, reading the entire contents of each row before moving to the
next row. The complete content of each cell in each row is spoken—including
the complete content of any table nested within a cell. This is called
linearization.

Suppose that a Web page is laid out using a table with 9 columns and 22 rows.
The screen reader speaks the content of the cell at Column 1, Row 1 followed
by the cells in columns 2, 3, 4 and so on to column 9. However, if any cell
contains a nested table, the screen reader will read the entire nested table
before it reads the next cell in the original (outer) table. For example, if
the cell at column 3, row 6 contains a table with 6 columns and 5 rows, all
of those cells will be read before Column 4, Row 6 of the original (outer)
table. As a result, the meaningful sequence conveyed through visual
presentation may not be perceivable when the content is spoken by a screen
reader.

Examples

Failure Example 1: A layout table that does not linearize correctly

An advertisement makes clever use of visual positioning, but changes
meaning when linearized.

Failure Example 2: A layout table that separates a meaningful sequence when linearized

A Web page from a museum exhibition positions a navigation bar
containing a long list of links on the left side of the page. To the
right of the navigation bar is an image of one of the pictures from
the exhibition. To the right of the image is the kind of "placard"
text you'd see on the wall next to the object if you were at the
museum. Below that text is a heading that says "Description," and
below that heading is a description of the image. The image, placard
text, Description heading, and text of the description form a
meaningful sequence.

A layout table is used to position the elements of the page. The
links in the navigation bar are split into different cells in the
leftmost column.

Because the navigation bar links are interleaved with the content
describing the image, screen readers cannot present the content in a
meaningful sequence corresponding to the sequence presented
visually.