画像の代替テキスト

画像の代替テキストとは

画像の代替テキストは、画面上のビジュアルイメージの代替となるテキストです。

代替テキストを設定することで、画像を直接見ないユーザーにも画像が持つ情報を提供できます。

ウェブサイトのページやブログなどの記事、プロダクトのなかで画像を使うときは、代替テキストをつけることを検討してください。

代替テキストによるアクセシビリティの向上

代替テキストは、さまざまな状況で多くの人に有効な、画像の内容を伝える手段です。

視覚障害のあるユーザーなど、視覚情報に依存しない閲覧をするユーザーには、代替テキストが特に役立ちますが、視覚的に困難な状況は、障害の有無に関わらず誰にでも発生する可能性があります。

以下は、視覚情報を受取ることが難しい状況の例です。

  • 視力が低い
  • 視野が欠ける、ぼやける、まぶしい、かすむ
  • スクリーンリーダーや音声ブラウザ、テキストブラウザでの閲覧
  • 通信速度が低く、画像を読み込めない
  • 画像がリンク切れになっている
  • 液晶画面が破損している
  • 検索エンジンやRPAツールなどのロボット

代替テキストの書き方

画像が文脈上どんな意味を持つかによって、代替テキストの内容を検討してください。alt属性の良い事例(つけ方・書き方)|情報バリアフリーポータルサイトにある多くの事例が参考になります。

代替テキストを書かないとき

特に意味を持たない、ページ装飾用の画像の場合は、代替テキストを空にしてください。

HTMLのimg要素で画像を挿入する場合は、<img src="meaningless-image.png" alt="" />のようにaltの属性値を空にします。

代替テキストのない画像は、スクリーンリーダーやテキストブラウザなどの画像を見ない閲覧方法で、その画像自体がない場合と同じように扱われます。

代替テキストを書くとき

画像が伝える情報を過不足なく簡潔に書いてください。以下の点に注意してください。

  • 特別な意図がない限り、本文にある内容を繰り返さない
  • 画像が持つ以上の情報を含めない
  • 代替テキストはプレーンテキストとして扱われ、<br>などのHTML要素は使用できない
  • 画像に含まれる情報が多く、説明が長くなったり、複雑になってしまう場合は、要約した内容を代替テキストにするか、説明を本文に追加することを検討する

関連情報