I was in for simply using <img> tags with alt attributes, but it defeats the point of content/structure separation, I want all my styling away from the XHTML.

I generally agree with you. However, and this might be slightly off-topic, but as of lately I’ve tended to lean to that it’s ok to have one H1 element for the logo and one for the actual heading/name of the current page.

Considering the logo, it should also be clickable in most case, with the home page as destination.

Take this for example: When replacing a h1 with a logo, which is very common, you will probably make the h1 clickable in the same way. But since a h1 should represent the page’s content and will likely change from page to page, it’s not such a good idea at all. You’ll get a situation where “I clicked the large ‘blue widgets’ link and came to the front page”. Confusing and bad semantics. Not to mention SEO.

It’s easy to use the very same replacement techniques to alter the logo in various layouts, f.ex negative for screen and positive for print.

I’m all in for using the img tag for logotypes, except maybe on the front page.

http://monc.se/kitchen/27/logotype-image-replacement

Thanks for your long comment, and for thoroughly expressing your view on it!

Correct me if I’m wrong here, but when it comes to how a screen reader reads out the text in the alt attribute within a H1 tag, isn’t that rather a screen reader issue?

I think I’ve heard (not literally, but heard mentioned) that some screen readers do in fact read it out as a heading.

When it comes to image replacement techniques and display: none, I couldn’t agree more…

The reason that semantically-reach information is needed for images is because without that, a screen reader will announce a logo with the same emphasis as, say, a 5×5 pixel spacer GIF or an email icon. That is the #1 priority point for using image replacement — because when you stick a logo into an H1 (not an image into an H1, but the H1 is the logo via image replacement) it is announced with the same emphasis as H1 text which is infinitely more useful to the assisted-user than just alt text. People using screen-readers FAR outweigh users who are browsing with CSS on and images off, so it’s almost a moot point.

Sticking an image into an H1 for a logo doesn’t help at all, because when the screen reader gets to it, it’s only just announcing alt text on an image and the H1 semantics are lost. Image replacement techniques that use display: none; to work are completely and utterly useless because the screen reader can read CSS, and will not say anything that’s not visible on the screen. FIR and other display: none; techniques should not be used for this very reason.

Faruk summed up my thoughts on this subject almost completely, but remember everybody, image replacement was first dreamed up because it was a more accessible alternative to just sticking images into your HTML when those images convey meaning within the context of the site.

Thank you!
Sounds like an interesting idea, with one inline image and one image replacement for spicing it up.

This actually would work really nicely if you are building a print stylesheet.