Visibility and Image Replacement

Contact Us or call 1-877-932-8228
Visibility and Image Replacement

Visibility and Image Replacement

  • Text equivalents for CSS images will be spoken by screen readers, even if the display: none style is used, when a parent element has a CSS rule that sets an image to the background

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. Screen shot of target navigation area

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. navigation with css images replaced by text

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.