第6回　代替テキストの問題と解決法 前編

Webアクセシビリティに取り組んでいく上で、最初に問題となるもののひとつが画像に対する「代替テキスト（Alternate Text）」です。現在のWebサイトでは情報を、画像を用いて視覚的にわかりやすく魅力的に提供するのが一般的です。しかし、スクリーン・リーダーなどの支援技術は、画面に表示されている画像の情報を、そのままでは利用者に伝えることができません。そこで画像に対する説明として、代替テキストを設定していくことになるのです。

Webアクセシビリティ関連のガイドラインでは、Webサイト内で画像を使用する場合、代替情報を提供しなければならないと書かれています。しかし、多数のWebサイトで、代替テキストの設定されていない画像が多用されているのが現状です。

ショッピングサイトの商品説明や商品購入のためのボタン類など、画面上では購買意欲を高めるような画像も、スクリーン・リーダーや音声ブラウザ利用者には内容が把握しづらいものが多くあります。

それでは、代替テキストが設定されていない画像のあるページは、スクリーン・リーダーではどのように聞こえるのでしょうか？　今回もJAWSの音声で確認してみましょう。

このように、代替テキストが設定されていない画像については、そのファイル名を読み上げます。この状態では、音声ブラウザやスクリーン・リーダーの利用者は、その画像がどのようなものなのかを把握することができません。そこで、画像の内容を説明するために、代替テキストを設定するのです。

画像にその説明となる代替テキストが設定されていれば、スクリーン・リーダーや音声ブラウザでも、その内容を読むことができます。

前述した通り画像に説明となる代替テキストを設定しなければ、スクリーン・リーダーなどの支援技術では、内容を利用者に伝えることができません。しかし、この項の見出しを見て疑問に感じた方もいらっしゃるかもしれませんが、代替テキストはすべての画像に必要なわけではありません。ページ内の飾りとなる画像やレイアウトを整えるためのスペースなど、代替テキストを設定してしまうと、かえってページを読みづらくしてしまう物もあるのです。

下記の図はページ内の飾りとなる部分にも代替テキストが設定されている一例です。

画像3をJAWSで読み上げた音声。『リスト項目』と重複して読まれる部分があり、冗長である

本来、文書構造を適切に設定したページを作成する場合は、上記のリストはUL等のリストに関連する要素を用いることが適切です。ですが、Webサイトの中には上のようにリストを視覚的に表現し、そのリスト項目のはじめに画像を置くことで本文との違いを表現しているようなケースもあります。

こうした場合には、スクリーン・リーダーや音声ブラウザで飾りが読まれないよう、またテキストブラウザで飾り画像の代替情報が表示されないよう、代替テキストを「alt=""」と設定すべきです。

ガイドラインを遵守することはもちろん大切ですが、Webコンテンツの制作に携わる方には、ガイドラインの内容をすべてのコンテンツに機械的に適用するのではなく、ケースバイケースで最適な方法を探り、実行する姿勢を望みます。どのような場合にどういった代替テキストを設定すればよいのか、また音声でそのページを閲覧した際に聞きづらくないかなど、十分検討していただきたいと思います。

次回も代替テキストの使用方法につきまして事例を紹介します。