title: Alternative to text-indent:-999em for creating accessible links with background css
body: <p>I've been doing some reading recently about text-indent:-999em potentially being mistaken by search engine bots as a spammy technique.</p>
  
  <p>One of our front end designers regularly uses this technique for adding links to areas use background image sprites.</p>
  
  <p>Take the following html/css:</p>
  
  <pre><code>//html
  &lt;div id="masthead"&gt;
    &lt;a href="/path/to/page"&gt;View this in more detail&lt;/a&gt; 
  &lt;/div&gt;
  
  //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;
  }
  </code></pre>
  
  <p>This then having the effect of the background image being clickable.</p>
  
  <p>Is there a nicer alternative to this?</p>
  
  <p>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.</p>
  
  <pre><code>&lt;a href="/path/to/page"&gt;&lt;img src="transparent.gif" alt="View this in more detail" /&gt;&lt;/a&gt;
  </code></pre>
  
  <p>Just interested to hear what the general consensus is on this.</p>