装飾のための画像の場合
リンクテキストの頭に、三角や矢印など、リンクを示すアイコン画像を配置することはよく見られるケースですが、このような画像に対し、「alt="三角"」とするのは妥当ではありません。「alt="リンク"」としてその意図を説明しても、読み上げられた時にやや冗長に感じられますし、代替テキストの役割に反し、ユーザーの理解を妨げることにもなりかねません。このような場合には、「alt=""」というように、alt属性値を空にするのが一般的です。ただし、繰り返しになりますが、どのような画像であっても、alt属性の記述を省略することはできません。きちんとalt属性を指定したうえで、値は空にする（alt=""）、というのが構文的に正しい作法です。
<img src="arrow.gif" alt="三角" />
<img src="arrow.gif" />
<img src="arrow.gif" alt="" />
装飾を目的とした画像の代替テキストについては、alt属性値を空にするのではなく、半角スペースや全角スペースを指定するよう推奨しているガイドラインもありますが、現状ではユーザーエージェントごとの実装に統一性がありません。従って、HTML 4.01の仕様書で示されるように、装飾を目的とした画像のalt属性値は空にすることを基本とし、サイトのターゲットユーザーが使用している主要なユーザーエージェントが明確である場合には、それに応じた実装を検討する、というのが現在考えられるベターな方法です。
リンク画像の場合
リンクテキストの近くに画像があるようなケースでは、二重読み上げにも気をつけなればいけません。例えば、「サイトマップ」というリンクテキストの先頭に三角アイコンを置き、alt属性値を「サイトマップ」とした場合、属性値を空にするよりも丁寧なように感じられるかもしれません。しかしこれだと、音声ブラウザでは「サイトマップ」という文言が二重に読み上げられてしまいます。リンクテキストと自然に繋がる代替テキストを指定するか、そうした文言が見当たらない場合には、やはり空の値を指定するのが無難だと言えるでしょう。
<a href="sitemap.html><img src="arrow.gif" alt="サイトマップ" />サイトマップ</a>
<a href="sitemap.html><img src="arrow.gif" alt="" />サイトマップ</a>
二重読み上げの問題を回避したり、装飾目的のタグを取り除いてクリーンな（X）HTMLを保ったりする目的で、このようなケースでは、CSSを使用して画像を表示するのが一般的です。具体的には、a要素に対し、三角アイコンの画像を背景画像として左に一度だけ表示するよう設定し、さらに、リンクテキストと三角アイコンが重ならないよう、左側にアイコンの幅サイズ分のパディングを設定します。
<a class="arrow" href="sitemap.html">サイトマップ</a>
a.arrow {
padding-left: 15px; /* 三角アイコンの幅サイズ以上の左パディング */
background: url(img/arrow.gif) no-repeat left; /* 三角アイコンの画像を背景にし、左側に一度だけ表示させる */
}
動作を表す画像の場合
アクセシビリティに配慮したWebページ制作において、新しいウィンドウを開くことは極力避けるように設計するのが望ましいと言えます。しかし、外部サイトを別のウィンドウで開くよう設計することも多く、このような場合には、クリックするとどうなるのか、あらかじめ挙動を予測できるようにしてあげると親切です。
次の例では、別ウィンドウを開くことを示すアイコンをリンクテキストの先頭に置き、クリックするとどうなるのか予測できるよう配慮しています。この場合の代替テキストは空ではなく、「新しいウインドウを開きます」などのようにするのが適切です。
<a href="http://...."><img src="new_win.gif" alt="新しいウインドウを開きます" />姉妹サイト「○○へ」</a>
まとめ
以上、画像の代替テキストを扱う際、判断に迷いやすい部分を中心に取り上げて説明してみました。いずれの場合にも「これが正解」という方法はありませんが、その画像がどのような役割をもって使われているのかを踏まえ、その意図がユーザーに伝わるよう、よく検討したうえで、適切な代替情報を提供することが大切だと思います。
