Image
Replacement Techniques - Accessible Solutions?
If you look at this site using a CSS-compliant browser, you will see a logo at the top of every page. If your browser does not support CSS, you will get a standard heading - an <h1> (as in this example, Netscape 3). The technique relies on some hacks which can fail under certain circumstances (if you have images disabled but CSS enabled, you will not see the image, nor will you see that hidden <h1> text).
Spotted at Simon Willison’s site today - some alternative ways of doing this that seem to offer a less hacky approach (they negate the need for a superfluous <span> tag), but we still have an issue if images are disabled - you don’t get the text to fall back on, and because the images are generated as background images, not inline, you have no alt attribute to rely on.
Take a look at the alternatives - but think, can you solve this last puzzle? Can you think of a way that allows this level of device independence while not causing the accessibility issue under those circumstances? Winner receives a sticky bun.