In Access Matters » Screen Readers and CSS Layout a call went out for testing went out to see if CSS has any effect on column order in documents read by screen readers. The results were, as I expected, no effect. The screen readers read the content exactly as ordered in the HTML, regardless of where the CSS places it on the screen. In fact, this is a fact that we banked on in the latest design of DisabilityInfo.gov where we wanted the section menu to appear after the content (but have it still appear on the left side, thus appearing to appear before the content if this were a table-based layout). In fact, we were originally pinged on this by Section 508 reviewers who felt that there was an inconsistency between the visual order of the page and the actual order. When we explained that this was on purpose, they withdrew that complaint. (I could go on a whole rant about the kinds of things Section 508 reviewers in the government has made us do, such as adding <noscript> tags after javascript blocks in the header of a document where it has no practical or useful purpose, but I won’t).

I tested all four CSS Zen Garden sites with VoiceOver (MacOS X 10.4 Tiger) and found that the first three were identical to the results Access Matters found but the fourth one listed the download links first and then everything else as expected. I am not sure why that one page was different. I checked the HTML and it is identical except for the specific links to the css file.

At any rate, it was good to have my assumptions confirmed (in fact, they shouldn’t have been assumptions given that all screen readers are weird in different ways at different times). I went ahead and recorded the three tests for column order using VoiceOver in Tiger (MacOS X 10.4).

123.mp3 (1-2-3 column order)

213.mp3 (2-1-3 column order)

321.mp3 (3-2-1 column order)

Great idea for a test! I plan on doing more testing with VoiceOver as these come up.

Technorati Tags: css, accessibility, webdesign