1

メニューの実際のテキストではなく、テキストの画像を表示する必要があります。

各メニュー リンク内にスパンを配置しました。これらのスパンには高さと幅が設定されており、ブロックを表示するように設定されています。テキストは非表示にするためにマイナス インデントされており、背景画像は使用したい画像に設定されています。

<li>
  <a href="site.com/page1">
    <span id="menu1"> 
      Link Text
    </span>
  </a> 
</li>

これはクロスブラウザで正常に動作しています。ページを拡大縮小しても問題なく動作します。スクリーン リーダーなど、明らかではないアクセシビリティの問題はありますか?

ありがとう

4

2 に答える 2

4

スクリーン リーダーdisplay: none;: テキストはビューポートから外れていますが、 orで隠されているわけではないため、ユーザー (視覚障害者や視力の弱い人) には問題ありませんvisibility: hidden;。

ハイ コントラスト モード: Windows では、このモードは背景画像を非表示にし、カスタム カラーを使用してコンテンツを表示します。CSS はまだアクティブ化されているため、テキストは視覚的に隠されていますが、背景画像はなくなりました。多くの視力の弱いユーザーにとって、メニューはなくなりました。

選択したかどうかにかかわらず、何らかの理由で画像がロードされない: CSS がまだアクティブである限り、ハイ コントラスト モードと同じ問題。

EDIT：多くのテクニックが説明されており、Chris Coyer によって説明されている賛否両論があります: http://css-tricks.com/css-image-replacement/。
最もアクセスしやすいのは、本当に使用したいものがalt付きのHTML画像である場合、背景画像を使用しないことです:)

于 2012-04-04T15:27:34.413 に答える
1

はい、CSSbackgroundはスクリーン リーダーによって読み取られないため、SEO にも悪影響を及ぼします。あなたができることは、そこでテキストを使用してから、次のいずれかで非表示にすることです。

text-indent, opacity:0

!!!あなたはすでにそこにあるものを書いているだけなので、それがブラックハットSEOと見なされるかどうかはわかりません!!!

于 2012-04-04T11:04:59.573 に答える