Description

This describes the failure condition that results when CSS, rather than
structural markup, is used to modify the visual layout of the content, and
the modified layout changes the meaning of the content. Using the
positioning properties of CSS2, content may be displayed at any position on
the user's viewport. The order in which items appear on a screen may be
different than the order they are found in the source document. Assistive
technologies rely on the source code or other programmatically determined
order to render the content in the correct sequence. Thus, it is important
not to rely on CSS to visually position content in a specific sequence if this sequence results in a meaning that is different from the programmatically determined reading order.

Examples

Failure Example 1

The following example demonstrates how CSS has been improperly used
to create a set of columns. In addition, the text appears visually
in the browser in a different order than in the markup.

In this example a class is defined for each object that is being
positioned. When style sheets are applied, the text appears in two
columns. Elements of class "menu1" (Products) and "menu2"
(Locations) appear as column headings. "Telephones, Computers, and
Portable MP3 Players" are listed under Products and "Idaho" and
"Wisconsin" are listed under Locations (note the different order for
Idaho and Wisconsin in the source code order).

Since appropriate structural elements have not been used, when style
sheets are not applied, all of the text appears in one line in the
source order, "Products Locations Telephones Computers Portable MP3
Players Wisconsin Idaho."