HTML5Boilerplate and Text Replacement Text Text-indent -999em

Question

I use HTML5Boilerplate for most of my projects since it is a great environment, but I and another developer go back and forth about the image replacement class and using text indentation: -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 that the HTML5Boilerplate team did a lot of research when they put together a stylesheet, and I know that this is a common technique that many developers use. What do you guys think about this? Should I start using a different method so that our sites are not punished or is it okay to continue using it?

Thanks!

Answer 1

Both of these links are specific to Logos, where the most semantic route is to add a logo as an image tag with the alt attribute:

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

What they do not cover are cases where you can use the usual replacement for old images. As embedding fonts is becoming more common and supported, replacing images is less problematic because it is less common, however there are still many cases where the only way out is to use a replacement image.

This is especially common in headlines, as artists tend to want fantasy.

If possible, use an inline image with the alt attribute, as this is the most semantic way to display it. The trick is that you may or may not have direct access to the markup if you are using CMS, so in many cases the solution is to use CSS or JS image replacement.

If you must use CSS, don't worry about text-indent: -9999px; . Legislative replacement will not force you to be blacklisted by Google, just do not try to play the system, trying to hide content from users who are only visible to Google.