CSSの背景画像　［画像］

装飾画像以外でCSSの背景画像を用いていないか

解説

CSSのbackground-imageプロパティを用いることもできるのは、特に何も情報を伝えていない装飾画像だけです。何らかの情報や意味を伝えていて、代替テキストを必要とする画像には、background-imageプロパティを用いてはなりません。

CSSのbackground-imageプロパティを用いて表示させている背景画像は、例えばWindowsのハイコントラストモードなどの特定の利用環境では、全く表示されません。Windowsのハイコントラストモードは、ロービジョンの視覚障害のあるユーザーなどが利用しています。もしアイコンだけのボタンがあり、そのアイコンがCSSの背景画像として表示されている場合、ユーザーの利用環境によっては表示されないので致命的な問題になります。

そのため、装飾画像を使用する際、HTMLの<img>要素とCSSのbackground-imageプロパティのどちらを用いるかは、その装飾画像の重要度によって決めるとよいかもしれません。

近年、Webページの表示を高速化させることやアイコン等の画像のメンテナンスを効率化することを目的に、このCSSによる背景画像が必要以上に多用されています。background-imageプロパティの使用は、ユーザーの利用環境によっては伝わらなくてもよい装飾画像のみに留めましょう。

事例 1. CSSの背景画像

悪い例


background-image: url("../img/information.png")

情報を伝えている画像をCSSのbackground-imageプロパティを用いて背景画像として表示している。代替テキストが提供されていないため、例えばスクリーンリーダーなどの支援技術では、ユーザーは同じ情報を得ることができない。また、Windowsのハイコントラスト表示では、全く表示されないため、ユーザーはこの画像が伝えている情報を読み取ることができない。

良い例


<img src="../img/information.png" alt="（ここに画像の代替テキストが入る）">

<img>要素のalt属性を用いて、画像が伝えている情報を代替テキストとして記述している。スクリーンリーダーなどの支援技術を利用していてもユーザーは情報を取得できるほか、Windowsのハイコントラスト表示などの利用環境でもそのまま表示される。

WCAG 2.0の達成基準

1.1.1 非テキストコンテンツ（レベル A）
利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たすテキストによる代替が提供されている。ただし、次の場合は除く：

  • コントロール、入力: 非テキストコンテンツが、コントロール又は利用者の入力を受け付けるものであるとき、その目的を説明する名前 (name) を提供している。
  • 時間依存メディア: 非テキストコンテンツが、時間に依存したメディアであるとき、テキストによる代替は、少なくとも、その非テキストコンテンツを識別できる説明を提供している。
  • テスト: 非テキストコンテンツが、テキストで提示されると無効になるテスト又は演習のとき、テキストによる代替は、少なくともその非テキストコンテンツを識別できる説明を提供している。
  • 感覚的: 非テキストコンテンツが、特定の感覚的体験を創り出すことを主に意図しているとき、テキストによる代替は、少なくともその非テキストコンテンツを識別できる説明を提供している。
  • CAPTCHA: 非テキストコンテンツが、コンピュータではなく人間がコンテンツにアクセスしていることを確認する目的で用いられているとき、テキストによる代替は、その非テキストコンテンツの目的を特定し、説明している。なおかつ、他の感覚による知覚に対応して出力する CAPTCHA の代替形式を提供することで、様々な障害に対応している。
  • 装飾、整形、非表示: 非テキストコンテンツが、純粋な装飾である、見た目の整形のためだけに用いられている、又は利用者に提供されるものではないとき、支援技術が無視できるように実装されている。
WCAG 2.0「ガイドライン 1.1 代替テキスト」

参考