装飾画像　［画像］

装飾画像は、<img>要素のalt属性値を空（alt=""）にしているか、またはCSSの背景画像にしているか

解説

特に何も情報を伝えていない装飾画像は、代替テキストを提供する必要がないため、alt属性値を空（alt=""）にします。代替テキストが不要な場合でも、<img>要素のalt属性を省略することはできないので注意してください。

また、装飾画像にはCSSのbackground-imageプロパティを用いることもできます。ただし、background-imageプロパティは装飾の背景画像のために使用するものです。例えば、ロービジョンなどの視覚障害があるユーザーが利用しているWindowsのハイコントラストモードでは全く表示されません。また、画像の代わりに表示させる代替テキストを提供することもできません。

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

前述の Windowsのハイコントラスト表示のように、特定の利用環境では表示されなくてもよい程度の装飾画像であれば、CSSのbackground-imageプロパティを用いてもよいでしょう。

しかし、いわゆるイメージ画像やイラストのように、そのWebページの雰囲気を創り上げるために使われている装飾画像は、どのような利用環境においても表示されたほうがよいケースもあります。そのような場合には<img>要素を用いてalt属性値を空（alt=””）にしてください。

なお、一般的には装飾画像には代替テキストを提供する必要はないとされているが、例えば中途失明したユーザーの間では、装飾のための画像であっても代替テキストを求める声もあります。代替テキストで説明されていれば、ページの雰囲気を頭の中でイメージすることができます。冗長な説明にならないかぎり、装飾画像に対しても代替テキストを提供することは悪いことではありません。

事例 1. <img>要素

悪い例 1.


<img src="image.png">

装飾のイラスト画像の<img>要素にalt属性がない。

良い例 1. 


<img src="image.png" alt="">

alt属性値が空（alt=””）になっている。

事例 2. CSSの背景画像


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

装飾のアイコンにCSSのbackground-imageプロパティを用いている。ただし、この場合、Windowsのハイコントラストモードでは全く表示されなくなってしまうため、利用環境に関係なく常に表示させたい場合には、<img>要素を用いる必要がある。

WCAG 2.0の達成基準

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

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

参考