[thelist] CSS image replacement

Ian Anderson ian at zstudio.co.uk
Thu Apr 28 14:16:57 CDT 2005

Jan Brasna wrote:

>> Is the "Fahrner" image replacement technique the best way to make the 
>> nav more accessible?  Or is there some superior method?
> DIR, Pixy's way, GIR, sIRF, Dynatext...
> <http://css-discuss.incutio.com/?page=ImageReplacement>
I have been working on accessible image replacement for nav bars for 
most of the week, as it happens.

That page gives some great references, but all current methods have 
*some* accessibility problems. Here are the things to assess any 
technique on:

1. Does the technique use display: none?
This breaks in screen readers (depending partly on whether the style 
sheet is imported or linked) because the real text is hidden to the 
screen reader too. You need techniques that
a. Use text-indent, padding or something else to move the text out of 
the container (but see below)
b. leave the text in place, but position the image over the text. These 
techniques typically rely on additional markup such as empty span tags 
in the element, or JavaScript to write a span dynamically as the page loads.

2. Does the technique work with CSS on/images off?
Using strategy 1a. above, this breaks the CSS on/images off case. No IR 
technique can be considered accessible if it fails this. In my view, 
techniques must use variants on 1b. to be remotely accessible.

3. Does the technique prevent the display of the focus rectangle?
I could not find any mention of this in connection with any IR technique 
and it is a serious limitation - one I think may be overcome. If the 
replaced element is a link, and you use either 1a or 1b strategies, the 
focus rectangle is hidden; either it is out of the 'viewport' or it is 
behind the image. Either way, you have created what is likely to be a 
serious barrier to using the site for any sighted users that navigate by 
the keyboard. In my view, this makes any existing IR technique fail any 
reasonable definition of basic accessibility if the replaced elements 
are linked.

4. Does the technique allow the user to change the displayed colours and 
type size of the replaced elements?
The very fact of using images instead of text means that any IR 
technique will probably fail this one. In implementing the technique, if 
you have a style sheet switcher that allows the selection if larger type 
sizes, you can consider providing different images too and changing both 
the displayed images and the font size when the style sheets are 
switched. You could also consider providing an option in the UI that 
allows the user to turn off image replacement, to allow user defined 
colours and font choices to be observed on the page.

I have uploaded my current test to http://zstudio.co.uk/zir; please feel 
free to give it a whirl. The example has no style sheet switcher, but 
this project will have one when it is completed. I will write up my 
findings in due course, as I think they may be of help to other people 
attempting this.

In order to alleviate keyboard navigation problems, the example attempts 
to use :focusand :active to swap the IR backgrounds on the main nav. The 
background image has three states; off, active and active with 'focus 
rectangle'. The active state is used for the current section and for 
hover states. The active with focus state is used when the link is 
tabbed to. It seems a bit flakey, often failing in Win IE 6 which is the 
very browser it needs to work in, of course. It works great in Firefox, 
of course.

I am building it at this very moment, but the "Barristers" image shows 
the principle in action. The other images will be uploaded soon.

Any feedback is most welcome.




More information about the thelist mailing list