画像に合う適切な代替テキストとは

　Webページに画像を用いる際には、画像をレンダリングできない場合であっても、ユーザーが画像の内容を理解することができるよう、使用する画像に合った方法を用いて代わりとなる情報を提供する必要があります。どのようなケースでどのような代替テキストを指定するべきなのかについて考えてみましょう。

文章情報を補う画像の場合

　img要素のalt属性では、画像の内容を「簡潔に説明」するのが基本です。img要素で示される画像には、写真やイラスト、図、グラフなど、さまざまな種類がありますが、いくら簡潔な説明といえども、「写真」や「イラスト」などといった画像の種類だけを代替テキストとして指定するは不十分です。他にその画像に関する言及がない限り、ユーザーは「写真」や「イラスト」などといった文言だけで、その画像が具体的にどのようなものなのかを理解することはできません。

　例えば、「写真」ではなく「2009年春、吉野の千本桜の写真」とする方がより具体的ですし、さらに、音声として読み上げられることを考慮すれば「写真：2009年春、吉野の千本桜」というように、読み上げの最後に写真であることが分かるよりも、最初に写真であることを伝える方が、風景を伝えたいという作者の意図が分かりやすく、よりスマートだと言えるでしょう。別の例で言えば、「2009年春、吉野の千本桜」の後に「……の開花状況を示した図」と続けて読み上げられたとします。この場合、それが開花データをグラフィカルに伝えることを意図した画像であることは、読み上げ終わるまで予想することができないわけです。

<img src="photo.jpg" alt="2009年春、吉野の千本桜の開花状況を示した図" />

<img src="photo.jpg" alt="図：2009年春、吉野の千本桜の開花状況" />

画像説明が長くなる場合

　「alt属性値は簡潔に」と述べましたが、そうは言っていられないケースもあります。特に「グラフ」や「地図」などといった、情報を視覚的に分かりやすく説明するための画像については、代替テキストだけでは説明しきれないことが多いものです。例えば、1月から12月までの売上データを、音声で順に読み上げられるところを想像してみてください。これでは、分かりやすく伝えるどころか、ユーザーを混乱させてしまうことにもなりかねません。

　このような場合には、まず、代替テキストで何の画像なのかを簡潔に示したうえで、前後の文章で画像の内容を説明するようにすると良いでしょう。画像が「地図」であれば、その前後に最寄り駅からの道順をテキストで説明するといった工夫が挙げられます。

　また、別途画像を説明するためのページを用意して、longdesc属性の値に説明ページのURIを指定して参照できるようにする方法もあります。このlongdesc属性は、img要素の任意属性で、alt属性の説明を補足するものです。例えば、IBMの音声ブラウザ「ホームページ・リーダー」では、画像にlongdesc属性が指定されている場合「イメージの説明」というアナウンスが入り、ここでEnterキーを押すと、longdesc属性で指定されたURIへ移動して、説明ページを参照することができます。また視覚系ブラウザのFirefoxでは、コンテキストメニューの画像のプロパティから、longdesc属性で指定されたURIを確認することができます。

図1：Firefoxの画像のプロパティ：longdesc属性で指定されたURIを確認できる

　ただし、longdesc属性を認識することのできないユーザーエージェントもありますから、念のため、a要素を用いて、説明ページへのリンクテキストも併記しておくと良いでしょう。また、こうした方法では、リンク先の情報を参照することになるため、更新の際に、画像とリンク先の情報の同期にずれが生じないよう注意が必要です。

　次の例では、alt属性で画像の簡潔な説明をし、テキストで要約を、longdesc属性とリンクテキストで説明ページ（moreinfo.html）を参照できるようマークアップしています。

図2：alt属性値が長くなる画像のマークアップ例の図

<p><img src="graph_2008sales.gif" alt="棒グラフ:2008年の1月から12月の売上データ" longdesc="moreinfo.html" width="600" height="300" /></p>
<p>当社の2008年の売上高の最も高かった月は、9月で198万円となっており、売上高が最も低かったのは、1月と4月の123万円となっています。</p>
<p><a href="moreinfo.html">2008年の月別売上の詳細データ</a></p>