Quiz 4.1.2: How do CSS layout variations affect assistive technology - part 1
WCAG 2.0, section 4.1 says “Use technologies according to specification.” There has been much ado about this recently, but that’s not what this entry is really about. That advice simply sets the foundation for something else.
Joe Clark asks here, and here that we test variations in CSS layout to see if layout differences cause differences in the output of screen readers and other assistive technology. We’ll do the easy one first. For that, Joe suggests testing several Zen Garden examples.
He’s asked twice now. Let’s get busy and help the man find the answers. All the Zen Garden pages are all readily available to us, and those of us who have assistive technology can see if there are any significant differences between the examples.
I have selected 4 Zen Garden pages of widely different visual appeal. Let’s try these out and see what we find.
- http://www.csszengarden.com/?cssfile=001/001.css
- http://www.csszengarden.com/?cssfile=019/019.css
- http://www.csszengarden.com/?cssfile=151/151.css
- http://www.csszengarden.com/?cssfile=167/167.css
Over the next few days, I will test each of these four pages with IBM HPR 3.04, JAWS 6.01, and Window Eyes 5.0. I’ll make recordings of the results for posting as part of a summary article.
Please test what you can with assistive technology available to you. If you can make audio files, please mail them to me and I’ll post them. MP3 at 128 kbps, or less, preferred. Send to ‘bob’ at this domain.
Q. Do CSS layout variations in Zen Garden 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.
- E I’ve tested with _____, and am sending you audio files.
June 27th, 2005 at 7:26 am
Before using any screen readers, I’ll start off with a guess: answer A. This hunch is based on the vague idea that current screen readers construct a DOM tree and then work from that. Since the HTML is absolutely fixed for all of the Zen Garden entries, I wouldn’t expect variations in the DOM tree.
June 27th, 2005 at 7:44 am
I agree with Bob. Haven’t had a chance to use screen readers on the above Zen Garden entries, but with all the other sites I have typically tested, it is the underlying HTML that matters the most.
There may be some issues, such as if CSS like display:none is used, but floats, position etc, from what I have seen don’t affect the listed screen readers. Hence I too go with A, until I get a chance to try it :)
June 27th, 2005 at 8:54 am
I’m hoping it’s A. Otherwise we are in deeper trouble than we thought.
June 27th, 2005 at 9:31 am
I’m going to say A too, for the same reasons as Anup.
June 27th, 2005 at 2:35 pm
C (sortuv*). The content of the pages appears in the same order, but some content is missing in some of them.
*Lacking a proper screen reading I just ran a test using Fangs (www.standards-schmandards.com/fangs/). Since it’s just an emulator and not really a screen reader I’m not sure if it counts, but since many like me don’t have another tool I thought we might compare these results with an proper reader’s results.
What I found was that it would fail to find text hidden using “Classic FIR” image replacement (this technique uses display: none; in the CSS). That means that for all but #1 the H3 text is missing. And for #151 and #167 the paragraph that begins, “A demonstration of what can be accomplished…” is also missing.
In defense of The Garden, the code behind it is outdated and cannot be changed without breaking all the designs. If Dave Sea were to re-code it he might tailor the HTML for one of the many other image replacement options now available: http://mezzoblue.com/tests/revised-image-replacement/
Actually, looking over the options in Shea’s revised image replacement article the only one he has tested in a screen reader uses the same old zen garden style code: the Dwyer Method. I would be very interested to find out if it does indeed work in all current screen readers.
June 27th, 2005 at 3:05 pm
C, kinda. Tested with VoiceOver, and the only difference is caused by the same inaccessible image replacement methods mentioned by Nils.
June 27th, 2005 at 4:41 pm
Nils, Thanks for the observations. They are matching what I’m hearing in screen readers. That is, almost everything is read in the same sequence. The missing parts are always due to image replacement techniques.
For what it’s worth, we had an image replacement quiz a few weeks ago. In that quiz, I tried four methods. One of them, the Lehy / Langridge method is very similar to Dwyer in that overflow : hidden is the same hiding mechanism. Lehy / Landridge does work in all screen readers we tested, and I’m assuming Dywer works equally well.
June 28th, 2005 at 10:03 am
Bob,
Is there a “results” page for all the testing that’s being done? I don’t have access to the proper technology to test along w/ you guys, but I’m very interested in summaries of what you find out.
June 28th, 2005 at 3:34 pm
Bryce, The most concise summary so far is the page called Screen Reader Visibility Test Results.
July 3rd, 2005 at 11:29 am
My first inclination, answer A, has become answer D after a round of testing.
I have tested with IBM HPR 3.04, Jaws 6.1 and Window Eyes 5.0. All three speak the material in the sequence found in the HTML, not according to the on screen appearance. There are various omissions because of the inaccessible ways some image replacement techniques were used.
I’ll follow up with a very thorough summary, and recordings, after one or two more rounds of examples.
July 4th, 2005 at 6:17 am
I’m going with A and a touch of C. I’ve done some testing in the past with JAWS (don’t remember which version) and from the information I’ve gathered over the past year on CSS layouts and accessibility, it’s mostly poor image replacement techniques that have a (negative) impact on accessibility. The rest would all be DOM-related and as said above, the DOM for these pages is 100% the same for all of them.
I think the CSS Zen Garden samples will all be fairly inaccessible for screenreaders, as it was made before accessible image replacement techniques were known. As a result, the markup tends to lend itself only (or at least, mostly) to inaccessible image replacement methods, or no image replacement at all. Not much of an option for many of the (official) designs, thus I think it’s safe to assume that these samples designs will all lack a lot of screenreader-accessible text.
July 6th, 2005 at 1:26 am
Damn, I’m the first one going with B? Anxiously awaiting the results…
August 3rd, 2005 at 4:48 am
I’m compelled to say A. We’ve been developing along side a lady who is blind [well almost blind]. Our development methods are to create very clean logical ‘mosaic’ layouts first, and then apply css. She reports that our sites are the best she has come across. Beats using a server script :) we have a blind accessibility expert.
June 29th, 2006 at 6:02 am
Good post. I am working with Axistive.com (http://www.axistive.com) take a look if you need more info on AT.
Aaron