Alternative to text-indent:-999em for creating accessible links with background css

I've been doing some reading recently about text-indent:-999em potentially being mistaken by search engine bots as a spammy technique.

One of our front end designers regularly uses this technique for adding links to areas use background image sprites.

Take the following html/css:

//html
<div id="masthead">
  <a href="/path/to/page">View this in more detail</a> 
</div>

//css
#masthead {
   开发者_开发百科background:transparent url(/path/to/image.png) top left no-repeat;
   position:relative;
}

#masthead a {
   display:block;
   width:100%
   height:100%;
   text-indent:-999em;
}

This then having the effect of the background image being clickable.

Is there a nicer alternative to this?

I can sort of achieve the same thing without the text-indent trick using a transparent gif and alt text, however kinda feels old skool.

<a href="/path/to/page"><img src="transparent.gif" alt="View this in more detail" /></a>

Just interested to hear what the general consensus is on this.

You can use this as a text indent alternative and with less markup:

CSS

a{
    background: url("http://www.google.co.in/intl/en_com/images/srpr/logo1w.png") no-repeat;
    display:block;
    width:100px;
    height:100px;
    font-size:0;
}

Check this example: http://jsfiddle.net/sandeep/epq2F/