12

画像をクリック可能なリンクに変換したい場合、次のことができることを知っています。

<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")}

これは問題なく動作しますが、アンカー リンクに何も含まれていないことが完全に有効かどうかはわかりません。Chrome は FF と同様に正常にレンダリングしますが、他が同じかどうかはわかりません。

リンク内にテキストを入れて で非表示にできることはわかっていますが、さまざまな理由text-indent: -9999pxで、そのアプローチが好きではありませんでした。上記の私のコードは、クロスブラウザーと互換性がありますか?

4

5 に答える 5

20

それは有効ですが、そこに何かを入れて次のようなものを使用するのが最善です

font-size: 0;

それを隠すために。これにより、誰かが CSS (スクリーン リーダーなど) を持っていない場合でも、リンクの内容をおおよそ知ることができます。

これは、このテーマに関する素晴らしい記事です

于 2012-05-08T18:47:31.187 に答える
8

基本的なアクセシビリティの原則に違反するため、まったく問題ありません。背景画像の代替テキストを指定する方法はありません。コンテンツ画像のタグのalt属性を使用して指定できるのと同じ方法です。imgWCAG2.0ガイドライン1.1を参照してください。

マウスオーバーで画像を変更したい場合は、CSSとJavaScriptのテクニックがあります。

于 2012-05-08T19:35:39.670 に答える
4

これは完全に有効ですが、必要に応じて、内部に空白を入れることができます: &nbsp;

于 2012-05-08T18:45:53.137 に答える
2

  を使用 テキストとして、そしてあなたは良いです。

于 2012-05-08T20:02:22.273 に答える
1

Markup.tips で最近、iOS 8 でいくつかのアクセシビリティ テストを行ったところ、VoiceOver が空のリンクに移動しないことがわかりました。少なくとも改行しないスペースが必要です。これが iOS のバグと見なされるべきかどうかはわかりません。

于 2015-04-05T23:01:24.503 に答える