CodeZine(コードジン)

特集ページ一覧

アクセシビリティから考える画像のマークアップ

そこが知りたい!Web標準サイトの活かし方(4)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2009/06/10 14:00

目次

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

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

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

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

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

[リスト1]悪い例:開花データを示した図であることが最後になって分かる
<img src="photo.jpg" alt="2009年春、吉野の千本桜の開花状況を示した図" />
[リスト2]良い例:まず画像の種類を示し、先に画像の意図を伝えている
<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を確認できる
図1:Firefoxの画像のプロパティ:longdesc属性で指定されたURIを確認できる

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

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

図2:alt属性値が長くなる画像のマークアップ例の図
図2:alt属性値が長くなる画像のマークアップ例の図
[リスト3]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>

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:そこが知りたい! Web標準サイトの活かし方

もっと読む

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

  • WINGSプロジェクト 宮本麻矢(ミヤモト マヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5