音声ブラウザは、画像に対して、どのような対処をするのか。 また、そのような特徴を考慮した上で、ページ作成の際は、どのような点に注意をすれば良いのか。
画像にリンクが貼られている場合と 貼られていない場合とに分けて考えてみましょう。
<IMG>要素に alt属性(代替テキスト)が指定されていれば、それを読み上げる。
指定されていない場合(又は、値がスペースや記号である場合)は、何も読み上げない。
<IMG src="xxx.gif" width="90" height="30" alt="お知らせ">
alt属性(代替テキスト)が指定されていれば、それを「女性の声」で読み上げる。
指定されていない場合は、リンク先のファイル名を「女性の声」で読み上げる。
※ 「リンク先のファイル名が読み上げられる」ということは、利用者にとって、単に聞き苦しいだけでなく、リンク先の内容を把握できないという問題を引き起こします。
必要に応じて適切な代替テキストを指定するようにして下さい。
よく、アニメの「吹き出し」のような感覚で付けているケースを見かけますが、「画像を通して伝えるべき内容」を記述するようにして下さい。 例えば、コンテンツの見出しなどにテキストの代用として画像を使用する場合は、画像に書かれてある文字が「伝えるべき内容」です。
また、画面を装飾するためのワンポイント画像やラインなどには、あえて値を指定せず、alt="" にしておく方が良いでしょう。
以下に良い例と悪い例をあげてみます。
(画像の上にマウスポインタを乗せてみて下さい。)
【良い例】 |
||
【悪い例】 |
また、「案内図」などのように、図表から得られる情報が極めて重要である場合は、alt属性だけでなく、別途テキストにて同等の情報が得られるようにしておいて下さい。
<IMG>要素には alt属性による説明を補うものとして、longdesc属性を指定することができます。
<IMG src="xxx.gif" width="400" height="300" alt="会場までの案内図"
longdesc="guide.html">
ホームページ・リーダーは、画像に longdesc属性が指定されていた場合、「画像の説明」としてリンクを生成します。 これにより、利用者は その画像に関する詳細な情報を音声によって得ることができます。
※ ただし、他のソフトの中には longdesc属性に対応していないものもあるので、現時点では <A>要素を用いたリンク設定をしておいた方が無難でしょう。
この場合、alt属性に「リンク先の内容」を記述するようにして下さい。
「新着情報」「メニュー」「プロフィール」など、リンクボタンとしてよく使われるものは、そのままの読みを記述しても良いでしょう。
ただし、「What's New」などのように、英字で記述をした場合、書き方によっては(前項参照)アルファベット一文字ずつ読み上げてしまうケースもあるので、なるべく日本語で記述されることをお勧めします。
また、バナー広告には、広告であるということがわかるよう、alt属性に「何々の広告」というような記述をするか、あるいは、バナーの直前に“広告であることがわかるようなメッセージを記述する”などの工夫をして下さい。
「リンク画像に適切な代替テキストを指定する」ということは、音声化に対する配慮の中でも特に重要なポイントの一つです。 利用者が戸惑うことのないよう、十分な配慮が必要だと言えるでしょう。
画像リンクとテキストのリンクを併用する場合、画像にalt属性を指定すると二重読みになってしまいます。
しかし、alt属性を指定しないとリンク先のファイル名が読み上げられてしまい、非常に聞き苦しくなってしまいます。 そこで、このような場合は、リンク画像のalt属性にスペースを付けておくのが良いとされていました。
ところが、ここで問題なのは、「音声ブラウザの中には、alt属性に半角,全角のスペースが付けられていた場合、属性値がない状態と同じであると見なし、リンク先のURLを読み上げるものもある」ということです。
では、通常 読み上げされることのない「*(アスタリスク)」などの記号であればどうかというと、例えばホームページ・リーダーにおいては、リンク画像が”単独”で存在している場合、記号などでも 例えば「アスタリスク」などというように読み上げられてしまいます。
そこで、このような場合の対応策として、次のような方法を提案します。
この方法であれば、リンク画像は”単独”ではなくなるので、alt属性として付けられた記号も読み上げられることはありませんし、「音声ブラウザによっては、リンク先のURLが読み上げられてしまう」という現象を回避することが可能です。
(ちょっと ややこしいですか.....?)
<A href="news.html">
<IMG src="news.gif" width="60" height="30" border="0" alt="*">今週のニュース</A>
多少変則的な手段ですが、音声ブラウザの読み上げ特性を考えると、このような設定にしておく方が良いでしょう。
※ これは、音声化に対する注意点ではなく、手に障害のあるかたへの配慮です。
リンク画像が小さすぎると クリックする場所が狭くなるため、手に障害を持つ人は うまくクリックできないことがあります。 特に小さいリンク画像が複数並んでいるような場合、間違って隣りのリンク画像をクリックして、別のページへ飛んでしまうようなことも起こりかねません。
リンク画像は小さくなりすぎないよう、適度な大きさを持たせるようにして下さい。