There has been a lot of discussion of image replacement over the last four years prompted in part by Joe Clark's October 2003 article, "Facts and Opinion About Fahrner Image Replacement" in A List Apart. The idea if image replacement is to create your elegant textual buttons or headings as images, but display them as CSS background images, and include default text that the image replaces styled display:none.
Here is a screen shot of the main top navigation area of the home page of a web site that has been in the news a lot because of a suit brought by the National Federation of the blind against Target Corporation.
Now, in the next screen shot we have used the Web Accessibility Toolbar to do two things: first, remove the CSS images (Images > Remove CSS Images) and then we changed text styled display:none to display:inline (CSS > display: none to inline). Remember there are two steps here.
Text equivalents for the CSS images are available for screen readers if they go against the odds and speak text that is styled display:none. Why do I say "go against the odds?" Simply because display:none should mean exactly that - no display either visual or auditory. Well it turns out that both of the major screen readers at this writing do indeed announce these text links. In fact, Window-Eyes (Version 6.1) will announce any link phrases hidden with display: none when a parent element (body element excepted) has a CSS rule that sets an image to the background (either using the generic background property, or with background-image) - see Gez Lemon's write up on this topic, which was prompted by a discussion that I had with Gez on this subject. JAWS (Version 8.0.2173) on the other hand seems to announce any link text (text in an anchor) even when styled with display:none.
This tutorial is based on Webucator's Web Accessibility and Section 508 Training for Experienced Web Designers Course. We also offer many other Web Accessibility Training courses. Sign up today to get help from a live instructor.