Alt属性（画像の代替テキスト）の正しい書き方を学ぶ

Posted at 22:27 on June 10, 2009

Last updated at 01:58 on July 21, 2010

Category: News, Note

連載第4回目となる今回は、「画像の代替テキスト」について扱います。「画像の代替テキスト」は、Webアクセシビリティの指針である「WCAG 2.0（Web Content Accessibility Guidelines 2.0）」や「JISX-8341-3（JIS X 8341-3:2004 高齢者・障害者等配慮設計指針－情報通信における機器、ソフトウェアおよびサービス－第3部：ウェブコンテンツ）」の中でも扱われている基本的な部分です。「画像の代替テキスト」について、前回の記事で紹介した「構文の妥当性」と「目的の妥当性」の両方の側面からみていくことにしましょう。

装飾のための画像の場合

　リンクテキストの頭に、三角や矢印など、リンクを示すアイコン画像を配置することはよく見られるケースですが、このような画像に対し、「alt="三角"」とするのは妥当ではありません。「alt="リンク"」としてその意図を説明しても、読み上げられた時にやや冗長に感じられますし、代替テキストの役割に反し、ユーザーの理解を妨げることにもなりかねません。このような場合には、「alt=""」というように、alt属性値を空にするのが一般的です。ただし、繰り返しになりますが、どのような画像であっても、alt属性の記述を省略することはできません。きちんとalt属性を指定したうえで、値は空にする（alt=""）、というのが構文的に正しい作法です。

［リスト4］悪い例：不要な代替テキストを指定
<img src="arrow.gif" alt="三角" />
［リスト5］悪い例：alt属性がない
<img src="arrow.gif" />
［リスト6］良い例：alt属性値を空にして指定
<img src="arrow.gif" alt="" />
　装飾を目的とした画像の代替テキストについては、alt属性値を空にするのではなく、半角スペースや全角スペースを指定するよう推奨しているガイドラインもありますが、現状ではユーザーエージェントごとの実装に統一性がありません。従って、HTML 4.01の仕様書で示されるように、装飾を目的とした画像のalt属性値は空にすることを基本とし、サイトのターゲットユーザーが使用している主要なユーザーエージェントが明確である場合には、それに応じた実装を検討する、というのが現在考えられるベターな方法です。

Alt 属性は省略しちゃいけないんですね。初めて知りました。装飾のために画像を使うときは alt 属性の値を空にすると。

さらに……。

リンク画像の場合

　リンクテキストの近くに画像があるようなケースでは、二重読み上げにも気をつけなればいけません。例えば、「サイトマップ」というリンクテキストの先頭に三角アイコンを置き、alt属性値を「サイトマップ」とした場合、属性値を空にするよりも丁寧なように感じられるかもしれません。しかしこれだと、音声ブラウザでは「サイトマップ」という文言が二重に読み上げられてしまいます。リンクテキストと自然に繋がる代替テキストを指定するか、そうした文言が見当たらない場合には、やはり空の値を指定するのが無難だと言えるでしょう。

［リスト7］悪い例：「サイトマップ」が二重に読み上げられる
<a href="sitemap.html"><img src="arrow.gif" alt="サイトマップ" />サイトマップ</a>
［リスト8］良い例：alt属性値を空にして二重読み上げに配慮する
<a href="sitemap.html"><img src="arrow.gif" alt="" />サイトマップ</a>
　二重読み上げの問題を回避したり、装飾目的のタグを取り除いてクリーンな（X）HTMLを保ったりする目的で、このようなケースでは、CSSを使用して画像を表示するのが一般的です。具体的には、a要素に対し、三角アイコンの画像を背景画像として左に一度だけ表示するよう設定し、さらに、リンクテキストと三角アイコンが重ならないよう、左側にアイコンの幅サイズ分のパディングを設定します。

［リスト9］（X）HTMLソース：画像（img要素の）記述は削除する
<a class="arrow" href="sitemap.html">サイトマップ</a>
［リスト10］CSSソース：a要素に対し背景画像とパディングを設定する
a.arrow {
  padding-left: 15px; /* 三角アイコンの幅サイズ以上の左パディング */
  background: url(img/arrow.gif) no-repeat left; /* 三角アイコンの画像を背景にし、左側に一度だけ表示させる */
}