6

Web ページ内の他のテキストに沿って、テキストの一部を画像に置き換えたい (たとえば、「call」という単語と電話のアイコン)。css を無効にしている (または css をアクティブにしていない) 人や、画像を見ることができない視覚障害者 [補遺]を罰せずに、これを通常のユーザーに対して機能させたいと考えています。次の2つの解決策のうち、どちらがより良い解決策ですか?

1.     <span title="call" class="s1"><span>


2.     <span class="s1 s2">call<span>

と：

.s1 {
    display:inline-block;
    background: url("call.png") no-repeat scroll 0 0 transparent;
    width:24px;
}
.s2 {
    overflow:hidden;
    text-indent: 30px;
}

PS:<img>代替手段はありません。

4

2 に答える 2

5

与えられた 2 つの選択肢のうち、明らかに 2 が正しい答えです。つまり、アクセシビリティへの悪影響が明らかに少ないです。CSS がオフの場合、要素は「call」という単語に縮小されますが、代替案 1 は空の文字列に縮小されます。一部のソフトウェアがtitle属性の値をアナウンスできるという保証はありません。たとえば、通常のグラフィック ブラウザを純粋にビジュアル モードで使用し、スクリーン リーダーを使用しない場合を考えてみましょう (たとえば、ページ CSS を上書きし、ユーザーに適した十分な大きさのフォントを強制する設定を使用)。

代替案 2 でさえ、アクセシビリティーが悪いです。CSS が有効になっている場合、「通話」という単語はアイコンに置き換えられます。しかし、ユーザーがそれを見ることができるという保証はまったくありません。altまた、コンテンツ画像のように背景画像にテキストを指定する方法はありません。また、電話のアイコンは何にしますか？そのようなアイコンのほとんどは ☎ や ✆ などの古いスタイルであり、そのようなデバイスを使用したことがない人がますます増えています。

于 2012-09-19T04:48:21.533 に答える
0

SPANは非常に一般的な要素であり、目的に適したマークアップ要素がない場合に使用する必要があります。あなたの場合、A「call」要素がユーザーエージェントが純粋なテキストと区別する必要があるものであると仮定すると、（アンカー）はまさに必要なものです。を使用しなくてもhref、これはアンカーです。JavaScript でマウス イベントにバインドするだけです。

また、ここで背景画像を使用するのは不適切です。背景画像は背景用です。実際、ユーザー エージェントは、アクティブなユーザー インターフェースの一部としてこれらをクリックすることさえ許可すべきではありません (非常に二次的な操作としてのみ)。目的の「通話」ボタンの場合は、content代わりに CSS プロパティを使用してください。あなたは正しいですがimg、それはナビゲーションではなく、ページのコンテンツを運ぶ画像のためのものです。つまり、ボタン、アンカーなどはimgタグを使用すべきではありません。inputまたはbutton、コンテキストに応じて使用することもできます（質問からはわかりません）。

本当にページをアクセシブルにしたいのであれば、あなたは正しい道を進んでいますが、次の方法がより良い代替手段だと本当に思います:

 <a class="s1" title="Call the following number">Call</a>

 .s1
 {
     content: url(call.png);
 }

s1CSSwidthとを使用して、クラスでマークされたアンカーのサイズを調整できますheight。ただし、代わりに SVG を使用します。グラフィックがベクターの場合は、間違いなくはるかに優れたアイデアです。ピクセルは写真とピクセルアート用です:-)

要素の後にテキストを追加したい場合は、CSS を使用できます:after。

.s1:after
{
    content: "Call";
}
于 2012-09-19T12:45:42.953 に答える