Source order and display order should match

Years ago, when using CSS for layout was still rather new, one of the common arguments for using CSS instead of tables for layout was that it enables you to change the layout order without editing your markup.

A typical example is a page with a vertical sub-navigation to the left, a centered content area, and a sidebar to the right. If you use tables for layout you will need to change the HTML to move the columns around, say if you wanted the navigation on the right and the sidebar on the left. With CSS you can change the visual order of the columns without touching the HTML.

Another example is to put your typical header with top level navigation after the content in the markup, and then use CSS to have it visually appear at the top of the page. (As an aside I think this example is problematic with current CSS layout techniques, since it makes it much harder to make the design flexible enough to allow different amounts of text and increased text size without causing problems with content becoming obscured.)

Repositioning content visually like this can be convenient, but there is a but. For accessibility reasons it is not a good idea to move large parts of the layout around visually without also changing the source order. There are several examples of problems that can be caused by the visual order being different from the source order in the WCAG 2.0 technique C27: Making the DOM order match the visual order:

If a blind user, who reads the page with a screen reader that follows the source order, is working with a sighted user who reads the page in visual order, they may be confused when they encounter information in different orders. A user with low vision who uses a screen magnifier in combination with a screen reader may be confused when the reading order appears to skip around on the screen. A keyboard user may have trouble predicting where focus will go next when the source order does not match the visual order.

There may also be situations where the visually presented order is necessary to the overall understanding of the page, and if the source order is presented differently, it may be much more difficult to understand.

The technique relates to two WCAG 2.0 success criteria: 1.3.2 Meaningful Sequence and 2.4.3 Focus Order.

My guess is that sighted keyboard users is the user group that is most affected by source order and visual order mismatches. As a part-time keyboard user I can verify that it can be pretty confusing when source order and visual order do not match and tabbing does not move focus to the element I was expecting it to.

In practice, this means two things:

Posted on March 17, 2011 in CSS, Accessibility