富士通ウェブ・アクセシビリティ指針

  仕様に関する指針 ＜画像＞  |   設計・制作・運営工程

解説

ブラウザで画像を非表示に設定している利用者は、画像の代替情報（注）がない場合、画像の内容を把握することができません。
また、音声ブラウザは、画像（ <img>タグ）の代わりに、alt属性の内容を読み上げます。
alt属性が指定されていないと、画像の内容を把握できない場合があります。

また、リンクのある画像の場合、alt属性が指定されていないと、音声ブラウザは、リンク先の URL を読み上げます。
画像の内容を的確に示す alt属性を指定してください。

（注）画像の代替情報
画像の代わりに、テキストや音声などで、同じ内容を記述した情報のこと。
alt属性で指定したテキストや、本文中に記述された画像を説明するテキストも、これに該当する。

事例と実装

• 画像にリンクがない場合
  • alt属性で画像の内容を記述する。
  • 意味を持たない画像（箇条書きのポインタなど）や、テキストが併記されている画像には、alt=""と記述する（ ""の中には何も入力しない）。特に、次のような言葉は alt属性に記述しない。
    イメージ、image、スペース、space、spacer、ライン、line、バナー、banner、figure、*、#、※
• 画像にリンクがある場合
  • alt属性でリンク先を記述する。
  • リンク先を alt属性として記述することで、画像の説明が不要となる場合は、画像の説明を省略してよい。
  • 画像の内容を詳細に解説する必要がある場合は、リンク先は alt属性に記述し、画像の解説は画像と同じHTML内にテキストで記述する。
• その他
  • 画像のボタン（imageタイプの<input>タグに type="image" を使用する場合）にも、alt属性を指定する。

悪い例1: 「第二章」を2度読み上げてしまう

良い例1: 意味を持たない画像はalt=""とする

悪い例2: alt属性なし（URLを読み上げてしまう）

良い例2: alt属性にリンク先を記述

良い例3: alt属性で画像を解説

前へ   49    50    51    52    53    54    55    56    57    58    59    60   次へ