Is text-indent: -9999px a bad technique for replacing text with images, and what are the alternatives?

Question

This article say we should avoid using this technique. This one says it's awesome. Is it true that Google looks inside CSS files for text-indent: -9999px; and punishes you? :|

I'm using that property a lot to hide text. For example, I have a button that is represented by an icon:

<a href="#" class="mybutton">do Stuff</a>

The CSS:

.mybutton{
  text-indent: -9999px;
  background: transparent url(images/SpriteWithButtons.png) no-repeat 20px 20px;
  display: block;
  width: 16px;
  height: 16px;
}

I don't see any alternative to my code. If I replace that with an image I automatically get +20 HTTP requests for each button image.

If I make the link empty, it is less accessibile because screen readers won't know what that is. And empty links look weird, probably Google doesn't like that either...

So what's the best way to handle such situations?

Brothel

You can always use padding-top: 9999px and overflow: hidden. – Frankie

as far as i know it its a slippery slope - if you don't overuse it, it seems to be okay - but since there is no "official" statement form google i try to avoid it altogether, but my best guess would be that google doesn't punish it but ranks whatever content is in there (much) lower then anything else on the page, maybe something like <a title="do stuff" href="#" class="mybutton"></a> is "better" but one can hardly know for sure ... – Chur

Another alternative is to use pseudo elements, as described in this article. – African

Answer 1

A good reason not to use the -9999px method is that the browser has to draw a 9999px box for each element that this is applied to. Obviously, that potentially creates quite a performance hit, especially if you're applying it to multiple elements.

Alternative methods include this one (from zeldman.com):

text-indent: 100%; white-space: nowrap; overflow: hidden;

...or alternatively (from here):

height: 0; overflow: hidden; padding-top: 20px;

(where 'padding-top' is the height you want the element to be).

I think the first method is neater, since it lets you set height in the normal way, but I've found the second one to work better in IE7

Attorneyatlaw

What use does the white-space: nowrap; provide? – Saliva

Without that, only the first word will be hidden. Subsequent words will wrap onto the next line and be visible. – Attorneyatlaw

Answer 2

I've read that Google doesn't promote the concept of using a negatve text-indent on anchor tags - http://maileohye.com/html-text-indent-not-messing-up-your-rankings/. Ideally, you should be using title tags and rel attributes to tell search engines more about the links.

Also, you might want to read these threads:

• http://www.google.com/support/forum/p/Webmasters/thread?tid=1a51b7310162d1aa&hl=en

• http://websitedesigningtips.com/5-tips-web-designers-developers-optimize-site-search-engines/ (the last point)

Sitemaps, robots, anchor tags using rel and title tags where possible and applying alt tags to your images should help better the SEO.

Google also traverses AJAX driven content now using the shebang (#!) operator so maybe that's something that you'd want to read up on - http://www.seomoz.org/blog/how-to-allow-google-to-crawl-ajax-content

Using HTML5 and JQuery, there are a number of plugins that allow bookmarking and deep linking of Ajax links.

Hope this helps.

Atworth

Answer 3

The text indent trick should be OK for action buttons, and perhaps not so OK if you want search engines to consider the link text while weighing the page rank of target page.

By the way I strongly believe Google will use multiple heuristics before considering your markup as SPAM so you should get away with using text-indent casually.

Dinkins

Answer 4

I’ve no idea if Google has issues (although the article you linked to links to a blog post from a Google employee, so that carries some weight), but I think the alternative is to use an <img> tag with a transparent GIF, and your sprite as its background-image:

HTML

<a href="#" class="mybutton"><img alt="do Stuff" src="1-pixel-spacer-image.gif" width="16" height="16"></a>

CSS

.mybutton,
.mybutton img {
  display: block;
  width: 16px;
  height: 16px;
}

.mybutton img {
  background: transparent url(images/SpriteWithButtons.png) no-repeat 20px 20px;
}

Background images on <img> tags work reliably, even in IE 6.

Of course, what Google’s trying to do is avoid indexing text that isn’t visible, and alt text isn’t visible either. But maybe it’ll avoid the risk of your page maybe being flagged as spammy by a Google algorithm.

And this method does at least result in the text being shown if the user disables images in their browser, which text-indent doesn’t.

Dinky

I think the big problem comes when you want to give screen reader users the full HTML experience of marked up text, which you can't do with alt or title attributes. HTML5 obsoletes the longdesc attribute and suggests aria-describedby instead. But if you don't want sighted users to have to read a description of an image that they can see perfectly well for themselves, then the only solution is to position the description outside the viewport, using text-indent or similar technique. – Frierson

Ah yes, if you’ve got text beyond a simple label, then this doesn’t work. I’m not sure how often that’ll happen with image replacement, as you’d expect an icon’s label equivalent to be pretty short. – Dinky

Answer 5

Well there is an alternative (which I use quite frequently).

<a href="#" class="mybutton"><span>do Stuff</span></a>

You can change span to strong/h1 etc. based on context.

.mybutton{
  background: transparent url(images/SpriteWithButtons.png) no-repeat 20px 20px;
  display: block;
  width: 16px;
  height: 16px;
}
.mybutton span{
    display: none;
}

Prank

.mybutton span {display: none;} will hide the content of the <span> from screen readers as well as other browsers. The idea of text-indent: -9999px is that screen readers still read the text even though it’s positioned off-screen. – Dinky

Agreed, this is probably not a better solution. – Fixate

Google probably won't index display:none items... it is considered a primitive form of spamdexing. – Dinkins