Quiz 4.1.3: How do CSS layout variations affect assistive technology - part 2
We are answering questions raised by Joe Clark about how CSS layout affects assistive technology. In last week’s quiz, we pointed our screen readers at four Zen Garden pages. The spoken results, not fully summarized yet, showed a high level of consistency even though the visual layout varied significantly.
Now, let’s try a simple variation. It is our old friend, the three column layout, which has a header, three columns, and a footer. The HTML for each of four variations is identical, just as the HTML for the Zen Garden is identical for all pages. The column shuffling is done entirely with CSS using techniques shown by Alex Robinson with his very interesting ordered float demonstrations.
Here are the four variations. Even if you don’t test them with assistive technology, there’s something to learn from Alex’s technique.
Q. Do CSS layout variations in these pages cause notable differences in assistive technology?
- A Just guessing, but I’ll bet they are similar.
- B Just guessing, but I’ll bet they are significantly different.
- C I’ve tested with _____, and they are similar.
- D I’ve tested with _____, they are significantly different.
July 4th, 2005 at 5:32 am
A. Just looking at the source code of the HTML I know that the major screen readers (e.g. Jaws, Windows Eyes, IBM Home Page Reader) will read them all the same. While I have not tested these ones (in a rush, that’s why!), I have tested similar things in the past many times. The source HTML is almost always what counts.
The only thing with CSS that I have come across that might be a major issue is display:none. But we have various techniques like off-left, and off-top to address this. This is not so much for image replacement, but more useful to hide things like headings and important sentences that are useful for such readers, or when CSS is not available.
July 18th, 2005 at 10:25 am
I tested with Fire Vox, the free screen reader for Firefox. It read them all the same way. It followed the order of the source HTML.
July 18th, 2005 at 10:30 am
I also tested with Foxy Voice, another extension for Firefox, and the result was the same. For some reason though, Foxy Voice pauses in the third item in the column three list. I’m not sure why.
July 18th, 2005 at 4:52 pm
Opera 8 also follows the order of the markup in the HTML document.
July 31st, 2005 at 2:15 pm
C. Tested with Safari 2 + VoiceOver.