2

タグ内のテキスト (スクリーンリーダーに使用) を非表示にし、代わりに背景アイコンを使用しようとしています。a

HTML

<a href="#"><span>Search</span></a>

CSS

span {
    display: none;
}
a {
    display: inline-block;
    width: 17px;
    height: 16px;
    background: url(http://i.stack.imgur.com/5c3zk.png);
}

なしで同じことを行う方法はありspanますか?

4

4 に答える 4

3

テキストをインデントして、完全に画面からはみ出すことができます。

text-indent:-5000px;
于 2013-02-26T17:44:22.743 に答える
2

チェックする必要があります: css を使用してテキストを非表示にする

しかし、それは次のようになります。

HTML:

<a href="#">Search</a>

CSS:

a {
    text-indent: -9999px;
    white-space: nowrap;  
    outline: none;

    display: inline-block;
    width: 17px;
    height: 16px;
    background: url(http://i.stack.imgur.com/5c3zk.png);
}

これがjsFiddleです（画像が読み込まれていないため、background-color:redを追加しました。）

それが役に立てば幸い。
乾杯。

于 2013-02-26T17:48:22.940 に答える
2

私はスクリーンリーダーソフトウェアを持っていませんが、私が正しいと思うなら、これはうまくいくはずです:

<a href="#"><img src="http://i.stack.imgur.com/5c3zk.png" alt="Search" /></a>

この CSS ルールを使用すると、次のようになります。

a img {
    border:0;
}

基本的に、このalt属性は代替テキストであり、スクリーン リーダーの場合に使用する必要があります。

于 2013-02-26T17:44:46.063 に答える
1

html

<a class="my-title" href="#">Search</a>

CSS

a.my-title { text-indent:-9999px }

また

html

<a class="my-title" title="Search" href="#"></a>

CSS

a.my-title { display:block;width:123px; all-your-styling:...; }

スクリーン リーダーは、アンカーからtitle属性をキャッチします。

于 2013-02-26T17:50:33.193 に答える