This technique relates to the following sections of the guidelines:
Task:
Controlling the reading order
Visual design often gives important cues to the content's organization-its structure. However, complex layouts may be difficult to interpret for people who have learning disabilities or cognitive impairments and for older users. A page that appears well organized visually may be difficult to understand for someone who is blind.
Example 1: An online newsletter.
The main content area of an online newsletter uses a layout that features two columns of text. as There is a "pullquote" in the center of the screen-- that is, a phrase taken from the article and displayed in a larger font to emphasize an important idea. The pullquote is shown over a shaded background and there is a border around it. Visually, the pullquote overlaps portions of both columns in the text. The page also includes a sidebar with a list of phone numbers. The visual layout does not require that the content be read in a certain order. However, it is important that people who use screen readers or text-only displays be able to read the content in a sequence that makes sense. Thus the pullquote and the sidebar should be clearly distinguished from the text in the left and right columns so that user agents can render the content separately.
These difficulties may be reduced or avoided by:
using markup to clearly define the sections of the document and their purpose;
Using ordered lists to number sections, subsections, and paragraphs as appropriate;
ordering content in the source document so that it makes sense when read aloud by a screen reader; and
using CSS to control visual and auditory presentation, including CSS positioning to create an effective visual arrangement that may be different from the spoken order of the content.
To summarize, correct use of structural markup ensures that standards-compliant user agents can determine the order in which the content should be presented, even when the user agent must adapt the presentation to meet the needs of people with disabilities.
HTML Techniques
Editorial Note: It would be good to have a technique about ordering DIV elements in the source document to create a linearized reading order.
CSS Techniques
Providing additional structural information
Editorial Note: CSS Technique 6.2 has important user agent issues; the :before and :after pseudoclasses are not supported by IE, so this technique should not be used to provide really important structural information.]