ナビゲーションをスキップ

3.画像

●  該当するタグ : <IMG>

  音声ブラウザは、画像に対して、どのような対処をするのか。 また、そのような特徴を考慮した上で、ページ作成の際は、どのような点に注意をすれば良いのか。
画像にリンクが貼られている場合と 貼られていない場合とに分けて考えてみましょう。


読み上げ処理のしかた


1.リンクが貼られていない画像の場合

  <IMG>要素に alt属性(代替テキスト)が指定されていれば、それを読み上げる。
指定されていない場合(又は、値がスペースや記号である場合)は、何も読み上げない。

alt属性」とは、一般に「代替テキスト」「画像のコメント」などと呼ばれているものです。
代表的なブラウザ上では、次のような効果をもたらします。
  1. 画像の上にマウスポインタを置いた時、指定された内容が表示される。
  2. 画像を読み込まない設定にしている場合、その領域に代替テキストとして表示される。


2.リンクが貼られている画像の場合

  alt属性(代替テキスト)が指定されていれば、それを「女性の声」で読み上げる。
指定されていない場合は、リンク先のファイル名を「女性の声」で読み上げる。

「リンク先のファイル名が読み上げられる」ということは、利用者にとって、単に聞き苦しいだけでなく、リンク先の内容を把握できないという問題を引き起こします。


具体的な対応のしかた


1.リンクが貼られていない画像の場合

  必要に応じて適切な代替テキストを指定するようにして下さい。
よく、アニメの「吹き出し」のような感覚で付けているケースを見かけますが、「画像を通して伝えるべき内容」を記述するようにして下さい。 例えば、コンテンツの見出しなどにテキストの代用として画像を使用する場合は、画像に書かれてある文字が「伝えるべき内容」です。

また、画面を装飾するためのワンポイント画像やラインなどには、あえて値を指定せず、alt="" にしておく方が良いでしょう。

以下に良い例と悪い例をあげてみます。
(画像の上にマウスポインタを乗せてみて下さい。)


【良い例】    
フォトギャラリー
バラの花の写真
【悪い例】    
タイトル画像
家の庭で撮影しました!

  また、「案内図」などのように、図表から得られる情報が極めて重要である場合は、alt属性だけでなく、別途テキストにて同等の情報が得られるようにしておいて下さい。
<IMG>要素には alt属性による説明を補うものとして、longdesc属性を指定することができます。

longdesc属性」とは、alt属性で指定された説明文を補うものです。
具体的には、その画像に対する詳しい説明(或いは その画像と同等の内容をテキストで説明したもの)へのリンクを指定します。

  ホームページ・リーダーは、画像に longdesc属性が指定されていた場合、「画像の説明」としてリンクを生成します。 これにより、利用者は その画像に関する詳細な情報を音声によって得ることができます。

ただし、他のソフトの中には longdesc属性に対応していないものもあるので、現時点では <A>要素を用いたリンク設定をしておいた方が無難でしょう。


2.リンクが貼られている画像の場合

  この場合、alt属性に「リンク先の内容」を記述するようにして下さい。
「新着情報」「メニュー」「プロフィール」など、リンクボタンとしてよく使われるものは、そのままの読みを記述しても良いでしょう。
ただし、「What's New」などのように、英字で記述をした場合、書き方によっては(前項参照)アルファベット一文字ずつ読み上げてしまうケースもあるので、なるべく日本語で記述されることをお勧めします。

【良い例】  
新着情報
プロフィール
お知らせ
【悪い例】  
WHAT'S NEW
PROFILE
INFO


  また、バナー広告には、広告であるということがわかるよう、alt属性に「何々の広告」というような記述をするか、あるいは、バナーの直前に“広告であることがわかるようなメッセージを記述する”などの工夫をして下さい。

「リンク画像に適切な代替テキストを指定する」ということは、音声化に対する配慮の中でも特に重要なポイントの一つです。 利用者が戸惑うことのないよう、十分な配慮が必要だと言えるでしょう。




− 画像リンクとテキストのリンクを併用する際の注意点 −

  画像リンクとテキストのリンクを併用する場合、画像にalt属性を指定すると二重読みになってしまいます。

【例】   今週のニュース今週のニュース

      (読み上げ結果 :「今週のニュース  今週のニュース」 )

しかし、alt属性を指定しないとリンク先のファイル名が読み上げられてしまい、非常に聞き苦しくなってしまいます。 そこで、このような場合は、リンク画像のalt属性にスペースを付けておくのが良いとされていました。

ところが、ここで問題なのは、「音声ブラウザの中には、alt属性に半角,全角のスペースが付けられていた場合、属性値がない状態と同じであると見なし、リンク先のURLを読み上げるものもある」ということです。

では、通常 読み上げされることのない「*(アスタリスク)」などの記号であればどうかというと、例えばホームページ・リーダーにおいては、リンク画像が”単独”で存在している場合、記号などでも 例えば「アスタリスク」などというように読み上げられてしまいます。

そこで、このような場合の対応策として、次のような方法を提案します。

  1. 画像とテキスト文、それぞれに対し個別にリンク設定をするのではなく、画像とテキスト文全体に一つのリンク設定をする。
  2. その際、画像のalt属性には「*(アスタリスク)」など、通常は読み上げされることのない記号を付けておく。

この方法であれば、リンク画像は”単独”ではなくなるので、alt属性として付けられた記号も読み上げられることはありませんし、「音声ブラウザによっては、リンク先のURLが読み上げられてしまう」という現象を回避することが可能です。
(ちょっと ややこしいですか.....?)

【具体例】   *今週のニュース

          (読み上げ結果 :「今週のニュース」 )

【タグでの指定例】

<A href="news.html">
<IMG src="news.gif" width="60" height="30" border="0" alt="*">今週のニュース</A>

多少変則的な手段ですが、音声ブラウザの読み上げ特性を考えると、このような設定にしておく方が良いでしょう。


リンク画像は、小さくなりすぎないように !

※ これは、音声化に対する注意点ではなく、手に障害のあるかたへの配慮です。

  リンク画像が小さすぎると クリックする場所が狭くなるため、手に障害を持つ人は うまくクリックできないことがあります。 特に小さいリンク画像が複数並んでいるような場合、間違って隣りのリンク画像をクリックして、別のページへ飛んでしまうようなことも起こりかねません。
リンク画像は小さくなりすぎないよう、適度な大きさを持たせるようにして下さい。



「2.テキスト文」へ戻る 「7つのポイント」目次へ 「4.イメージマップ」へ進む


*Copyright(C) Hiro Web Design Office