14 March 2003

More on Background-Image, II

Thanks to David Havelin, who just wrote in to report back the results of pointing JAWS 4.5 to the background-image text-replacement examples (Ex.1, Ex. 1.2, Ex. 1.3). David writes:

In all cases, when I asked JAWS to read the whole page, I heard: “Using background dash image to replace text vertical bar example one hello world exclaim”. [Replacing “one” by “one point two”, etc. as appropriate] I am using Internet Explorer 6.0.

Each of the examples mentioned above uses a different method to hide the raw text. All of them appear to get their hidden text read aloud in JAWS without a hitch. (The words preceding the “hello world” come from the document title.) It appears the Fahrner Image Replacement (FIR) technique may be complying directly with its intent summarized at the end of the tutorial: With responsible use and careful testing, this method can be used reliably to enhance the presentation of type on the Web, while preserving accessibility for image-exclusive browsing and indexing applications.

I’m still unsure of behavior in other screen readers, such as IBM HPR, or WindowEyes. But it appears we may be able to put to rest our readability concerns of hidden text, at least for JAWS.

Now I need to go hit up some of the naysayers who originally pointed out this technique’s critical flaw. What say they now? Ahem… Mr. Clark? Nice to meet you in Austin this past weekend. But we seem to be slowly proving this technique still works?

link Posted at 12:05pm in CSS, Writing 1

More on Background-Image, I

Jeffrey Zeldman writes up a very worthwhile read on the recent hot topic of CSS backgrounds. He appropriately attributes the original technique to Todd Fahrner, (from whom we’ve all drawn a lot of inspiration and practical problem-solving) and dubs it the Fahrner Image Replacement (FIR). In addition to providing several more benefits of the technique, Jeffrey also gives us a hint or two of future intentions with his ongoing redesign of zeldman.com.

However, our woes with the treatment of this technique in screen readers could be all for naught. Conflicting information is surfacing in how JAWS “reads” text styled with display:none. Elaine Nelson wrote in to point out a thread she started on the WebAIM mailing list about the “readability” of text she had hidden using a very similar technique in her navigation example (inspired nonetheless by the beautiful work over at cinnamon.nl). As can be seen in the archived thread, a list member with JAWS 4.5 responded with a very clear indication that all of Elaine’s text was read aloud as intended, even though the text was hidden and replaced with the same FIR technique we’ve been discussing.

Hmm. Very interesting. Another plea goes out to anyone with a screen reader installed (including Jaws, IBM Home Page Reader, or WindowEyes) to test the examples mentioned yesterday. Stay tuned for more information.

link Posted at 10:33am in CSS, Writing