アクセシビリティ教室 (第二回)
画像の代替テキスト
Web アクセシビリティでよく話題に上がるのが、画像の代替テキストだ。まだアクセシビリティについて詳しくない人でも、画像の img 要素に alt 属性で代替テキストを記述しなくてはならないことは多くの人が知っているだろう。しかし、きちんと記述されていないサイトがまだまだ多い。
JIS X8341-3 『高齢者・障害者等配慮設計指針－情報機器における機器・ソフトウェア・サービス－第三部：ウェブコンテンツ』でも、5.4 非テキスト情報の a) で "" 画像には、利用者が画像の内容を的確に理解できるようにテキストなどの代替情報を提供しなければならない。"、b) で"ハイパリンク画像には、ハイパリンク先の内容が予測できるテキストなどの代替情報を提供しなければならない。"と規定されている。
まず、なぜ画像に代替テキストが必要なのかを確認しておこう。
- 音声ブラウザやスクリーンリーダーは画像を読み上げることができない
- テキストブラウザは画像を表示することができない
- モバイル接続している際に画像を非表示にしているユーザーもいる
代替テキストは、こういった場合に必要となるのだ。音声ブラウザやスクリーンリーダーは画像のかわりに代替テキストを読み上げ、画像を表示できないブラウザは画像の代わりに代替テキストを画面に表示するのだ。そのために代替テキストを記述するということを頭に入れて、どのような代替テキストを記述すればよいかを考えていこう。
代替テキストの記述方法
では、どのように代替テキストを記述すればよいのだろうか。その方法はいたって簡単である。画像を指定する img 要素に alt 属性をつけて、alt 属性の値として代替テキストを記述すればよい。
<img src="images/image.jpg" alt="（ここに画像の代替テキストを記述する）" />
Dreamweaver MX 2004 では、[編集]-[環境設定]の"カテゴリ"で"アクセシビリティ"を選択し、"イメージ"を選択しておくとよい。
そうすると、画像を挿入する際にダイアログボックスが出てきて、代替テキストを記述するように要求してくる。こうしておけば、うっかり代替テキストを記述し忘れたということも未然に防ぐことができる。
同じ画像でもリンク画像の代替テキストは重要だ。例えば、ナビゲーション部分で画像を使用している場合、もし代替テキストがないと、音声ブラウザやスクリーンリーダーはリンク先に指定しているファイル名（a要素のhref属性の値）を読み上げてしまう。リンク先が外部のサイトだった場合には、「エッチ ティー ティー ピー コロン スラッシュ スラッシュ･･･」と読み上げられてしまうので、ユーザーはもうお手上げになってしまう。リンク画像の代替テキストには、テキストリンクのラベルと同じ考え方で、リンク先の内容が分かるようなラベルを記述するようにしよう。
注意すべき画像
画像に代替テキストを記述するのは大原則ともいえるが、画像の種類によっては代替テキストを記述すべきではないものもあるので注意が必要だ。
- スペーサー画像
- 装飾だけを目的にした画像
- テキストリンクのアイコン画像
これらの画像は、特に情報を伝えるために使用されているのではなく、レイアウト制御やページデザインの装飾のために用いられる。こういった画像には代替テキストを記述する必要はない。しかし、img 要素に alt 属性をつけるのは HTML の仕様で必須なので、alt 属性はつけてその値を空（""）にすればよい。
<img src="images/spacer.gif" alt="" />
先ほど紹介した画像を挿入する際のダイアログボックスでは、"代替テキスト"で"空"を選択すれば自動的に値が空の alt 属性が挿入される。代替テキストが必要ない画像を挿入する際には、以下の画面のように"空"を選択すればよい。
『LIFT for Macromedia Dreamweaver』を活用する
Dreamweaver MX 2004のアクセシビリティ機能を拡張するツール『LIFT for Macromedia Dreamweaver（以下、LIFT）』を使うと、さらに効率よく作業を進めることができるようになる。『LIFT』は他のツールにはない独自のセマンティック・アナライザーという機能で、画像の種類を判別してくれる。これと連動した修正ウィザード画面では、画像の種類によって代替テキストを記述できないようになっている。
また、『LIFT』には"ALT エディタ"という機能があり、サイト全体の画像ファイルの代替テキスト（alt 属性の値）を一括編集できる。既存サイトの代替テキストを追加／修正する際には非常に効率よく作業が進められるのが特長だ。
