HTML5Boilerplate and the Image Replacement Class text-indent -999em

Question

I have been using HTML5Boilerplate for most of my projects, as it is a great framework but me and the other developer have been going back and forth about the image replacement class and the use of text-indent:-999em.

He sent me these two links:

http://luigimontanez.com/2010/stop-using-text-indent-css-trick/

http://www.youtube.com/watch?v=fBLvn_WkDJ4

I know the HTML5Boilerplate team did a lot of research when they put together the stylesheet, and I know it is a common technique that a lot of developers use. What do you guys think of it? Should I start using another technique so our sites don't get penalized or is it OK to keep using it?

Thanks!

Answer 1

Both of those links refer specifically to Logos, where the most semantic route is to add the logo as an image tag with an alt attribute:

<img src="/path/to/logo.png" alt="Foo bar baz! The best way to fizz buzz" />

What they don't cover are cases where you might want to use plain old image-replacement. As embedding fonts is becoming more common and supported, image replacement is less of an issue as it's less common, however, there are still many cases when the only way out is to use a replacement image.

It's particularly common on headers as artists tend to want fancy flourishes.

If possible, use an inline image with an alt attribute, as that's the most semantic way of showing it. The catch is that you may or may not have direct access to the markup if you're using a CMS, so in many cases, the way out is to use a CSS or JS image replacement.

If you must use CSS, don't worry too much about text-indent: -9999px;. A legitimate replacement wont get you blacklisted from Google, just don't try to game the system by trying to hide content from users that's only visible to Google.