[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)
or
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.
HTH
Cheers
Ian
More information about the thelist
mailing list