web-dev-qa-db-ja.com

アクセス可能な画像ベースのロールオーバーナビゲーションを確保しますか？

デザイナーが特定の書体を必要とするため、フォントを埋め込まれたWeb用にライセンスされていないため、サイトの画像ベースの水平ナビゲーションバーを構築しています。これを行うための最良の方法は、メニューオプションの順不同リストを作成し、背景画像の置換でスタイルを設定することだと思いました。私はこれをしました、そして、彼らはよく働きます。

しかし、今ではホバーで画像を拡大したいので、背景画像を拡大するための解決策を見つけようとするかもしれませんが、背景サイズのCSS3サポートの現在の状態では価値があるよりも厄介なようです。 （私が間違っていて、私が見逃した解決策がある場合は、私を修正してください。）それで、私は各リスト項目のIMGへの切り替えに自分自身を辞任しています。

この方法では、王室の物事を混乱させることなくアクセスできるようにする最良の方法は何でしょうか？各画像に単にALT属性を使用する必要がありますか、それとも画像の置き換えと同じように優雅に劣化しませんか？

明らかに、私はこのサイトをクライアント向けに構築しています。最高のウェブ標準と慣行に遅れないように努めていますが、ここ数年クライアントサイトを構築していないことを認めなければなりません。映画のポストプロダクション）、それで、私はすべてのベースをカバーしていることを確認するために、ちょっとしたクラッシュコースを経験しています。ありがとう！

imagesnavigationaccessibilitybackground-image
2
bobtiki

もちろんaltを使用しますが、ほとんどの視覚障害者がWebを使用する方法ではありません。

開発者はaltを非常にひどくサポートするため、ほとんどの盲目のユーザー（ JAWS または Supernova を使用）は、ページ上のaタグのリストまたは見出しのリストをロードします。タグを使用して、ページの構造とページに含まれる情報を理解し、ページの関心のある部分を移動します。

このため、通常、liタグとtext-indentにプレーンテキストを残します。テキストは、-10000ピクセル右または左です。これは、ソフトウェアが引き続きリンクテキストを読み取るため、意味的に正確でユーザーにとってより便利なためです。正しく。

つまり.

<style><!-- #menu li { text-indent: -10000px; } --></style>

<ul id="menu">
   <li><a href="">link</a></li>
</ul>

Altは単一の要素の有用な説明であるはずですが、視覚障害者にとっての大きな課題は、ページ内の情報を迂回する方法を見つけることです（このように、検索エンジンロボットに非常に似ています） 。

Altが欲しいものを見つけたら便利ですが、それまではリンクと見出しタグがはるかに重要です。

0
toomanyairmiles

Alt attributeを使用すると、「物事の混乱」を引き起こさずにこれにアクセスできるようになります。シンプルで、ハッキングや追加のコードを必要としません。

1
John Conde

img要素でclip {}を使用します。これにより、Retinaデバイスでアクセス可能なCSSスプライトを使用できます。 ：hoverにsize/fxを追加するか、Spriteでホバーimgを大きくすることができます。

1
albert

alt属性は、背景画像ではなく画像タグ用です。

Background-imageを使用して、リストアイテム内にテキストを含めることができますが、CSSでテキストを非表示にします。このように、スクリーンリーダーはテキストを読み、画像を無視し、ナビゲーションは完全にアクセス可能になります。 display noneは使用せず、代わりに：

.invisible
{
position:absolute;
left:-9000px;
}

これをリスト項目内のテキストをラップするスパンに追加します。また、非表示にしたいが意味的に重要なページ上のすべてのもので再利用可能です（パンくずリストの前のh2タグなど）

0
MrJinPengyou