空のアンカータグを持っても構いませんか？

Question

私はクリック可能なリンクにイメージを変えたい場合、私は次の操作を行うことができることを知っている：

<a href="http://twitter.com/username"><img src="icons/twitter.png" /></a> 

しかし、私は、私はホバー状態を持つことができるように、CSSの背景画像を使用することを好むだろう。私はそれが何も含まれていないアンカーリンクを持っている完全に有効だか分からない以外

<a class="twitter" href="http://twitter.com/username"></a> 

# css 
.twitter{display:block; width:16px; height:16px; background:url("twitter.png")} 

これが正常に動作します。 FFでもそうですが、Chromeはそれをうまく描画しますが、他の人が同じかどうかはわかりません。

私はちょうど、リンク内のテキストを入れて、text-indent: -9999pxでそれを隠すことができ実現が、私はvariousreasonsため、そのアプローチを言っていたことがありません。私のコードはブラウザ間で互換性がありますか？

Answer 1

それは有効だが、あなたはそこに何かを入れて、それを離れて非表示にする

font-size: 0; 

ようなものを使用しなかった場合、それが最善です。このように、誰かがCSS（スクリーンリーダーなど）を持っていない場合、彼は依然としてリンクが何であるかを伝えることができます。

Here's a great article on the subject

Answer 2

それは完全に有効ですが、あなたがしたい場合、あなたは内部の空白を置くことができます。&nbsp。

Answer 3

それが基本的なアクセシビリティの原則を破るので、それは、全然OKではありません。コンテンツイメージのimgタグのalt属性を使用して指定するのと同じ方法で、背景イメージの代替テキストを指定する方法はありません。 WCAG 2.0 Guideline 1.1を参照してください。

あなたがマウスオーバーで画像を変更したい場合は、そのためのCSSやJavaScriptの技術があります。

Answer 4

使用& nbsp;テキストとして、あなたは良いです。 Markup.tipsで

Answer 5

以上、我々は最近のiOS 8の一部のアクセシビリティのテストを行なったし、VoiceOverのは、空のリンクへのナビゲーションないことを発見しました。少なくとも非破壊空間が必要です。これがiOSのバグかどうかはわかりません。