代替テキスト：画像（リンクなし）　［画像］

<img>要素のalt属性を用いて、画像だけが伝えている情報を過不足なく代替テキストとして記述しているか

  • 厳密な文字数制限はないものの、情報量の多い画像で代替テキストが長くなる場合は、本文のテキストなどで代替テキストを提供するとよい。

解説

画像などの非テキストコンテンツを用いる際は、ユーザーエージェントがその非テキストコンテンツが伝えている情報を解釈できるように、代替テキストを提供します。ブラウザや支援技術、検索ロボットなどのユーザーエージェントは、画像が提供している情報を解釈することができません。代替テキストを提供することによって、その情報がマシンリーダブルになり、ユーザーエージェントが解釈できるようになります。

画像が伝えている情報がマシンリーダブルになることによって、ユーザーエージェントでは次のような処理が可能になります。

  • ブラウザ：画像を表示するまでの間やユーザーが画像を非表示にしている場合、画像の代わりに代替テキストを表示する
  • テキストブラウザ：代替テキストを表示する
  • スクリーンリーダー：代替テキストを読み上げる
  • 点字ディスプレイ：代替テキストを点字に変換する
  • 検索ロボット：代替テキストの文字情報を取得する

画像の代替テキストは、その画像が伝えている情報をテキストに書き起こしたものです。HTMLのWebページの場合、多くは<img>要素のalt属性を用いて提供します。また、情報量が多い場合は、本文のテキストなどで提供するという方法もあります。

情報を伝えている画像は、CSSを用いて背景画像として表示させると代替テキストが提供できないほか、視覚障害のあるユーザーが利用しているWindowsのハイコントラスト表示では非表示になってしまうため、WCAG 2.0では不適合事例となっていますので注意してください。

事例 1. 文字を含んだ画像

サンプル：「Webアクセシビリティの学校 in 札幌　2019年2月15日（金）」と書かれた画像

悪い例 1.


<img src="sapporo.png" alt="Webアクセシビリティの学校 in 札幌">

画像にある文言の一部が代替テキストでは省略されている。

良い例 1.


<img src="sapporo.png" alt="Webアクセシビリティの学校 in 札幌　2019年2月15日（金）">

画像にある文言を省略することなく、全てをそのまま代替テキストとして提供している。

事例 2. 写真画像

サンプル：ドアに並記されているアルファベットの大文字「ACCESSIBLE」の凸文字と点字の写真

悪い例 2.


<img src="photo_of_door.jpg" alt="ACCESSIBLE">

画像が写真であることを説明していない。スクリーンリーダーは、「イメージ　｛代替テキスト｝」や「｛代替テキスト｝ 画像」と読み上げたりするので、ユーザーはそれが画像の代替テキストであることは分かるが、それが写真であることまでは分からない。また、代替テキストでの説明が足りないため、何の写真なのかが分からない。

良い例 2.


<img src="photo_of_door.jpg" alt="写真：ドアに並記されているアルファベットの大文字「ACCESSIBLE」の凸文字と点字">

画像が写真であることが分かるように、代替テキストの冒頭に「写真：」と記述している。例えば、スクリーンリーダーのユーザーは、そのWebページに写真があることが分かるので、本人は見ることができなかったとしても、必要に応じて誰かに代わりに見てもらうことができる。ただし、写真画像がリンクの場合は、写真であることの説明ではなく、ユーザーがリンク先を特定できるリンクテキストを提供する。

WCAG 2.0の達成基準

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

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

参考