Dave S. Posted…

The main problem with this one is that you can't use a transparent GIF unless you want bits of the text poking through. And the code is a bit cumbersome. Otherwise, it's probably the most accessible replacement technique at the moment.

Mike Posted…

Ahhh, but the tags! The non-semanticity is burning holes through my retinas! ;)

So we've broken through the CSS-on/Images-off barrier, which is good. But it appears as though its impossible to have an image technique be 1) semantic, 2) actually useful to screen readers and their users, and 3) work with images off. Oh well.

radu Posted…

so this should be both semantical ok (no <span> required) and useful for screen readers (I hope, at least), but no idea about images off...

http://www.homelesspixel.de/h1/h1.html

matte Posted…

radu, that's a great technique but there's one problem that I encountered. Since you are using a large width and adjusting the margin to put the background-image in place, you are covering up linked items to the left of the header. I found this out on a site I'm working on. I'll try and come up with an example page soon.

I had a header to the right of a left-floated nav box and the links directly to the left of the header were not clickable but move just a little below the header and the links were clickable. Partially covered links were unclickable on their top part but the first px line below the replaced header and it was clickable. This is easily seen by putting a 1px border style around the replaced header.

FYI.

matte
matte shift-2 silent dash e dot com