画像に対する配慮
代替テキスト（alt）とは
- 代替テキストとは、画像・図版・イラストで伝えたい内容・情報を文章にし、HTMLソースコード上にテキストとして付与したものです。 画像などを閲覧できない場合、スクリーンリーダーなどのWebサイトを音声で読み上げる支援技術を用いて内容を把握するために必要となります。
- 代替テキストを設定すると、画像などが閲覧できない状況でも情報を伝えることが可能です。代替テキストが設定されていないと、スクリーンリーダーなどの支援技術ではどのような画像なのかを知ることができません。 意味がある画像には代替テキストを必ず設定してください。
代替テキスト（alt）を付与するときの注意点
- 代替テキストは長文にならないように注意してください。
スクリーンリーダーなどの支援技術で読み上げた場合、長い代替テキストはスキップできないため理解しにくくなります。 代替テキストは端的に短く表現し、文章としての目安は長くても2センテンス程度とします。（日本語文字数目安は200文字程度） - 代替テキストは視覚的に見ている画像の情報を、周辺の情報と一緒に音声のみで伝える上で非常に重要です。音声でこれらの情報を伝えようとした場合に、冗長にならないように代替テキストを設定してください。
画像に代替テキスト（alt）を設定する場合のルール
画像を用いる際に代替テキスト（alt）をどのように設定すれば良いかは、以下のフローで判断をしてください。
Q1.装飾的な画像か？
No：Q2へ
Yes：「伝えたい情報がない画像（装飾画像・イメージ画像）」を参照
Q2.文字を含む画像か？
No：Q3へ
Yes：「画像内に文字がある画像」を参照
Q3.表示中のページや前後の文脈にとって意味のある画像か？
No：Q4へ
Yes：「伝えたい内容がある画像」を参照
Q4.上記のいずれにも当てはまらない画像か？
Yes：「該当画像をスクリーンリーダーで読み上げ、代替テキストが必要かを判断する」を参照
伝えたい情報がない画像（装飾画像・イメージ画像）
装飾的に画像を配置している場合やイメージ画像などは代替テキストは不要なため、「なし＝空（HTMLのタグ：alt=""）」を指定してください。 デザイン上、装飾として利用している画像の代替テキストは「なし＝空（alt=""）」で設定します。
例：ページ冒頭にデザイン的に配置されたイメージ画像の場合
ページの冒頭などにデザイン的に配置された装飾画像には代替テキストは不要です。
代替テキストの設定例： なし=空（alt=""）
例：コンテンツ内にデザイン的に配置されたイメージ画像の場合
コンテンツ内にイメージ画像として装飾的に配置された画像や、イメージ的に配置された画像には、代替テキストは不要です。
代替テキストの設定例： なし=空（alt=""）
代替テキストの設定例： なし=空（alt=""）
画像内に文字がある画像
「画像内に文字がある画像」を作成する場合の注意点として、「文字入り画像・文字画像作成時の注意点」も参照してください。
1.読ませたい文字がある画像
画像内に読ませたい文字がある場合は、原則として画像中の文字をそのまま代替テキストとして設定してください。
例：読ませたい文字がある場合
画像内の文字をそのまま代替テキストとして設定します。イラスト部分はここでは装飾的に使われているため、代替テキストでは表現していません。
代替テキストの設定例： What’s Tokyo Tech D&I
例：読ませたい文字があり、その文字だけでは画像の説明として不足する場合
画像内に読ませたい文字があり、かつその文字だけでは画像の説明としては不足するため、内容を補足して代替テキストにします。
代替テキストの設定例： 「設定する」レーザーの出力と加工速度の設定画面イメージ
例：読ませたい文字そのものが画像の場合
テキストそのものを画像にした場合は、画像にしたテキストをそのまま代替テキストにします。
代替テキスト： Feature1：驚きべきTSUBAMEの性能
代替テキストの設定例： 産学連携をご希望の方（オープンイノベーションセンターHPへリンク）
2.画像内に文字があっても装飾目的や可読性が低い文字がある場合／同様の内容が実際のテキストとして近くに存在する場合
画像内に文字があっても装飾目的・可読性が低い文字・読ませる必要がない文字の場合や、同様の内容が実際のテキストとして近くに存在する場合は、代替テキストは不要なので、「なし＝空（alt=""）」を指定してください。
例：画像内に文字があっても装飾目的や可読性が低い文字の場合
画像内に文字がありますが、この画像を説明するのに必要な文字ではないため、画像内の文字を代替テキストとして付与する必要はありません。
代替テキストの設定例： なし=空（alt=""）
代替テキストの設定例： なし=空（alt=""）
例：同様の内容が実際のテキストとして近くに存在する場合
画像内に文字がありますが、画像内の文字と同じ文字がすぐ上に見出しと文章としてあるため、文字内容を代替テキストにすると重複した内容で読み上げされるため、代替テキストは不要です。（「altはなし＝空（alt=""）」を指定してください。）
代替テキストの設定例： なし=空（alt=""）
3.リンクや機能ボタンに文字を利用している場合
リンクや機能ボタンに文字を画像として使用している場合は、リンク遷移先や機能ボタンを押した結果として期待される動作を、代替テキストとして設定してください。
例：リンクボタンやバナーの場合
画像ボタンやバナーなどの場合は、リンク先のコンテンツを示す画像内の文字をそのまま代替テキストに設定します。
代替テキストの設定例： インターネットでのお申し込みはこちら【クレジット決済・Pay-easy（ネットバンキング）決済】
代替テキストの設定例： 学生寮について
例：機能ボタン（アイコンとテキストが画像になっているボタン）の場合
固有の機能を持つ画像で文字を画像として利用している場合は、機能の説明を代替テキストに設定してください。
代替テキストの設定例： 印刷する
代替テキストの設定例： 検索する
伝えたい内容がある画像
1.意味のある画像
画像を目で確認した場合に「何かの情報を伝えたい画像」が意味のある画像になります。意味のある画像では、その伝えたい内容を簡潔にテキストにし、代替テキストとして設定してください。
例：人物写真に肩書きなどが含まれる場合
人物名だけを代替テキストに設定するのではなく、人物の写真であることを示すテキストとして「人物写真：〜〜」と代替テキストをつけるのが望ましいです。
代替テキストの設定例： 人物写真：高柳健次郎博士
例：図版などが状況を示している場合
図版などで状況を示している画像の場合は、簡潔に状況を説明する代替テキストをつけるのが望ましいです。
代替テキストの設定例： 学科から系に変わるイメージ図。Before（学科）では23学科があり細分化され、教員数も専門分野も限定的だが、After（系）では、17系となりさまざまな専門分野の教員が集まり、幅広くなる
2.画像にキャプションがある場合
画像にキャプションをつける場合は、画像の内容を簡潔に説明するキャプションをつけるように心がけてください。 代替テキストでは伝えたい内容は簡潔に表現します。文章としての目安は長くても2センテンス程度です。（日本語文字数目安は200文字程度）
- キャプションで画像の内容を説明できていると判断した場合は、スクリーンリーダーなどの支援技術では同じ内容が繰り返し読み上げられることになるため、代替テキストは不要です。「なし＝空（alt=""）」を指定してください。
- 画像の上下などに近接してキャプションがある場合は、代替テキストはキャプションと同じ内容にせず、「写真：〜〜」「イメージ図：〜〜」として、キャプションに対しての写真やイメージ画像であることを伝えるのが望ましいです。
例：キャプションで画像の内容が説明できている場合
画像のキャプションで写真が説明できている場合は代替テキストは不要です。
画像下のキャプション： マキニスタの出場ロボット kusaka（クサカ）
代替テキストの設定例： なし=空（alt=""）
画像下のキャプション： 英国王立研究所でクリスマスレクチャーを行うマイケル・ファラデー
代替テキストの設定例： なし=空（alt=""）
キャプションでは画像の内容が説明できていない場合
キャプションが画像の内容を示していない場合は、キャプションとは別に、画像で伝えたい内容を説明する代替テキストを設定します。 代替テキストでは伝えたい内容は簡潔に表現します。文章としての目安は長くても2センテンス程度です。（日本語文字数目安は200文字程度）
画像のキャプション： 地下2階では、天井の高い開放的なスペースの中、閲覧・学習ができます。
代替テキストの設定例： 写真：附属図書館地下2階の天井の高い開放的なスペース
画像のキャプション：「TSUBAME」には東工大のシンボル「ツバメ」が掲げられている
代替テキストの設定例： スーパーコンピューターTSUBAMEとロゴの写真
3.ロゴ・図版・イラスト・インフォグラフィックなどの場合
図版・イラスト・インフォグラフィックでは、伝えたい情報を簡潔にテキストにしたものを、代替テキストとします。
- ロゴ、図版やイラストの場合は、代替テキストの冒頭に「ロゴマーク：」「図版：」や「イラスト：」などを記載するのが望ましいです。
- 視覚情報として伝えたい情報がない場合は、代替テキストの設定は不要です。「なし＝空（alt=""）」を指定してください。
- 画像の周辺にその内容を表す説明文があれば、画像は補完となるので代替テキストは不要です。「なし＝空（alt=""）」を指定してください。
例：ロゴ・イラストなどの場合
イラストで伝えたい内容を代替テキストに設定します。伝えたい内容がない装飾的なイラストの場合は、代替テキストの設定は不要です。
代替テキストの設定例： TSUBAMEシンボルマーク
代替テキストの設定例： TMDUロゴマーク
例：インフォグラフィックの場合
インフォグラフィックを利用する場合は、インフォグラフィックで伝えたい内容を代替テキストに設定します。
代替テキストの設定例： 通学に使う交通手段の円グラフ。ひとりぐらし回答数228のうち、徒歩で通学する人の住まい50，自転車で通学する人の住まい115，電車で通学する人の住まい61、バイクで通学する人の住まい2
代替テキストの設定例： 「50種類以上の豊富な留学プログラム」を示したイラスト
例：図版の場合
基本的には図版内の情報を代替テキストに設定します。 ただし、図版内の情報量が多すぎる場合は、すべての情報を示すと文字量が多くなりすぎるため、要約した内容を代替テキストにします。 伝えたい内容は簡潔に表現し、文章としての目安は長くても2センテンス程度とします。（日本語文字数目安は200文字程度。）
代替テキストの設定例： 共創型エキスパートの説明図。共創型エキスパートは「1.DS・AIを駆使する、2.DS・AIで交わる、3.DS・AIを教える」人材
該当画像をスクリーンリーダーで読み上げ、代替テキストが必要かを判断する
代替テキストが必要かどうかを判断できない場合は、該当画像がある箇所を周辺のテキストと一緒にスクリーンリーダーで読み上げ、その画像の代替テキストがなくても視覚で得ている情報と同様の情報が伝わっているかどうかで判断してください。 ※スクリーンリーダーについては本ハンドブックの「リファレンス」を参照してください。
スクリーンリーダーで読み上げる場合、以下の点に注意して判断してください。
スクリーンリーダーで確認しても代替テキストをどのように設定するかわからない画像があった場合は、代替テキストは「なし=空（alt=""）」を指定してください。
-
画像があるWebページや画像周辺に記載されている情報が画像の説明をしているか
画像周辺の情報で画像を説明していない場合は、該当画像に対して適切な代替テキストが必要です。 -
スクリーンリーダーで読み上げの音声を聞いた際に、代替テキストがなくてもページの情報が、視覚で得た情報と同様に理解できたか（電話で画像を含むWebページの内容をすべて伝えられるかのようなイメージ）
- 音声のみで聞いた情報と視覚で得た情報に理解の差異がある場合は、該当画像に適切な代替テキストが必要です。
- 画像に代替テキストがなくても視覚で得た情報と理解の差異がない場合は、代替テキストは不要です。「なし＝空（alt=""）」を指定してください。
代替テキストを設定する画像の注意点
- テキストはなるべくテキストデータで表現する
テキストは画像データに入れ込まず、テキストデータで表現することを検討してください。 - 代替テキストを想定して画像を利用する 画像を作成する段階で、どのような代替テキストをつけるのかを想定してください。
- 1つの画像に2つ以上の画像要素がある場合は分割する
1つの画像に2つ以上の画像要素がある場合、画像を分割しても意味が通じるかを検討し、分割できる場合は、それぞれに代替テキストをつけてください。 - 複雑な図版や画像は再構成を検討する
元素材が複雑な画像や図版などは、原稿の再構成を検討してください。
例：1つの画像に2つ以上の画像要素がある場合は分割する場合
やむを得ず複数の画像を1枚の画像にする場合は「右図〜〜〜、左図〜〜〜」など、複数の画像があることを適切に示してください。
例：複雑な画像は再構成を検討するの場合
元素材のままだと代替テキストがつけにくい画像・図版などは、そのままの形でWebページに利用せずに代替テキストが付与しやすい形への再構成を検討してください。また、元素材が表などになっている画像などは、そのまま画像で利用せずにHTMLの表形式（テーブル）を利用するなど、HTMLで適切につくり直してください。
やむを得ず代替テキストがつけにくい元素材をそのまま利用する場合は、画像の内容を簡潔に代替テキストで設定してください。（文章としての目安は長くても2センテンス程度。日本語文字数目安は200文字程度。）
文字入り画像・文字画像作成時の注意点
読ませたい文字入り画像や文字画像を作成する際には、背景色と文字色のコントラスト比率に注意してください。
画像内に読ませたい文字がある場合やテキストを画像にする場合は、背景色と文字色のコントラスト比率を「4.5：1」以上を確保してください。コントラスト比が低いと、ロービジョン（弱視）、老眼、色覚特性のある人や、屋外のまぶしい状況で読みづらくなります。
背景色と文字色のコントラスト比率に関しては、「色（カラー）における配慮」も参照してください。
推奨の例：コントラスト比率を満たしている場合
画像内にある文字にフチやシャドウをつけることで、背景色と前景色（文字部分）のコントラスト比率を確保されています。
写真の上に文字を配置した場合でも背景色（写真）と文字のコントラスト比率が「4.5：1」以上確保されています。
非推奨の例：コントラスト比率が低い場合
画像内に読ませたい文字がありますが、背景色と前景色（文字）のコントラスト比率が「4.5：1」以下になっています。（意味がある文字は、コントラスト比率を満たす必要があります。）
