テキストのインデントに代わるもの：背景のCSSを使ってアクセス可能なリンクを作成するための-999em

Question

私は最近、テキストインデントについて：-999emはスパムのテクニックとして検索エンジンのボットと誤解されている可能性があります。

私たちのフロントエンドデザイナーの一人は、背景イメージスプライトを使用する領域へのリンクを追加するためにこのテクニックを定期的に使用しています。

は、次の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; 
} 

これは、背景画像はクリック可能であることの効果を持ちます。

これに代わる方法がありますか？

透明なgifとaltテキストを使って、テキストインデントのトリックなしで同じことを達成することができますが、ちょっと古いスキルが感じられます。

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

一般的なコンセンサスがこれに関係していることに興味があります。あなたがテキストのインデントの代替として、より少ないマークアップでこれを使用することができます

Answer 1

：

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; 
} 

は、この例をチェックしてください：http://jsfiddle.net/sandeep/epq2F/