There are so many image replacement techniques out there I’ve lost count. Some using negative margins, super-small fonts or
display:none, the reports are that some of them aren’t accessible.
But why replace images at all? Isn’t the
alt attribute meant to replace images with text, rather than a contortion of CSS techniques?
For the MOE Website we used negative margins to do the image replacement for the MOE crest on the top left. However, under it is a black-and-white version of the crest. This is used in the printer styles, and will also be printed by browsers that aren’t CSS-enabled. The black-and-white crest has alt text to make it accessible should images be turned off.
I’m sure there are many ways to skin this particular cat.
One suggestion that came up every now and then was that we could provide accesskeys to improve the accessibility of the MOE website.
After doing the necessary research, there seems to be quite a number of reasons why accesskeys don’t work. Most of these revolve around the fact that browsers have already taken up most “alt-x” combinations for their own shortcuts, and overriding these default behaviours with accesskeys was a step backwards. It is important to note that the inclusion of accesskeys is a convenience, rather than an essential part of making a site accessible. I wasn’t ready to disable browser default shortcuts (already etched into some users’ usage behaviour) to add a little convenience which would be specific only to the MOE website.
A compromise was to include a few accesskeys using alt-number which was for the most part unused by the major browsers. I included accesskey 1 for home, accesskey 2 for skipping navigation and accesskey 9 for feedback on the recommendation from my longtime web hero Mark Pilgrim.