web-dev-qa-db-ja.com

背景画像にアクセスできるようにする方法は？

インライン_<img>_タグを使用している場合は、_alt=_属性とその他の_aria-*_属性を使用して、画像にアクセスできるようにすることができます。

しかし、background-image: url(...)を使用している場合、このコンテナーをスクリーンリーダーにアクセス可能で使いやすいものにする方法について、何らかのガイドラインはありますか？コンテナに追加する特定の属性はありますか？

csshtmlbackground-imageaccessibility
8
Jake Wilson

background-sizeを活用して画像を背景に設定し、画像をコンテナに合わせて拡大縮小する場合は、imgとbackground-imageの両方を使用できます。ここで説明しました： 背景画像に代替テキストを追加する方法？背景画像にアクセスできるようにする 。

他の人が指摘しているように、画像のコンテンツがドキュメントにとって重要である場合は、必ずimgタグとaltの説明を使用する必要があります。しかし、background-imageを装飾的に同時に使用できない理由はありません。

3
Sean

背景画像は装飾目的で使用することを目的としており、代替テキストは必要ありません

WCAG2.0から

画像が装飾、間隔、またはページ内の意味のあるコンテンツの一部ではないその他の目的で使用されている場合、その画像には意味がないため、支援技術では無視する必要があります。

2
Adam

ほとんどの場合、背景画像は純粋に装飾的ですが（したがって、画像をスクリーンリーダーに公開する必要はありません）、開発者がbackground-imageではなく<img>を使用したい場合があります。何らかの理由で、通常の画像のセマンティクスを保持し、スクリーンリーダーに公開します（画像はコンテキストで重要であるため）。

その場合、ARIAを使用してbackground-imageのコンテナを公開できます role="img" 説明付き aria-label （または、 title属性）：

.important-image {
  background-image: url(...);
  ...
}

<div class="important-image" role="img" aria-label="{image description}"></div>

将来的には、CSSが代替テキストを提供できるようになることを願っています。 https://www.w3.org/TR/css-content-3/#alt を参照してください。

0
Null

装飾以外の背景画像の使用は避けてください。したがって、背景画像のテキストや画像内の他の意味は避けてください。

画像スプライト

アクセス可能なCSS画像スプライトに関する注意 ：

  • CSS背景画像が添付されている要素内に代替テキストを含めます。
  • 画像が有効で、Windowsハイコントラストモードが有効になっていない場合は、Javascriptを使用して、代替テキストを視覚的に非表示にするスタイルシートを追加しますが、支援技術では引き続き使用できます。
  • JavaScriptを使用して、画像が無効になったことを検出し、代替テキストのCSSの視覚的に非表示の表示状態を削除します。
  • JavaScriptを使用して、Windowsハイコントラストモードが有効になっていることを検出し、代替テキストのCSSの視覚的に非表示の表示状態を削除します。

Windowsハイコントラストモード

おもしろい事実、 Windowsハイコントラストモードメディアクエリ

@media screen and (-ms-high-contrast: active) {/* All high contrast styling rules */}
@media screen and (-ms-high-contrast: black-on-white) {
    div { background-image: url('image-bw.png'); }
}
@media screen and (-ms-high-contrast: white-on-black) {
    div { background-image: url('image-wb.png'); }
}

オフスクリーンテクニック

スクリーンリーダーのユーザーにアナウンスする情報を含める必要がある場合に使用します。必要なコンテンツを背景画像とともにコンテナに入れてから、次のクラスを適用します。

.visually-hidden {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding:0 !important;
border:0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}

これは、Windowsハイコントラストモードを使用していてスクリーンリーダーを使用していないIE（または古いバージョンのEdge）のユーザーには役立ちません。そのため、前のセクションに戻ります。

絵文字

うん。絵文字。 この手法を検討してください テキストコンテンツ（絵文字やアイコンフォントなど）とインラインの非テキストコンテンツの場合。

0
aardrian