第7回 代替テキストの問題と解決法 後編
前回は、代替テキストの使用方法について基本的な部分を解説しました。今回も、引き続き代替テキストの使用例と問題点について書いていきます。
（解説：辻 勝利）
 |
[プロフィール] つじ・かつとし●株式会社ミツエーリンクス アクセシビリティ・エンジニア。先天性の全盲で、インターネットをライフラインとして日常的に使用する。2001年よりWebアクセシビリティに関わる仕事に従事し、数多くの企業や自治体のWebサイトの音声読み上げ環境での検証を行う。現在は、アクセシビリティBlogでの情報発信や講演を通して、Webアクセシビリティの更なる普及・啓蒙活動を行っている。 |
alt属性をツールチップとしても機能させているページ
Webサイトの中には、「ここを押すとログインします」や、「これは詳細ページへのリンクのボタンです」のように、筆者のようなスクリーン・リーダーや音声ブラウザの利用者には“丁寧すぎる”代替テキストを設定しているページがあります。そうした代替テキストを初めて耳にしたとき、「ここまで説明しなければ、音声読み上げ環境の利用者には情報が伝わらないだろう」というコンテンツ制作者の配慮が、丁寧すぎる代替テキストとして表れたのではないか、と感じました。
また、そうした場合にもうひとつ、代替テキストの役割を誤解して、ツールチップとして機能させているケースがあります。Internet Explorerの場合、alt属性に記述した代替テキストが画像やリンクをマウスでポイントした際に表示されるツールチップとしても表示されます。これを代替テキストとツールチップの機能を同時に果たせ、一石二鳥と捉えるためか、懇切丁寧で長い説明文がalt属性に記述されています。
IEではマウスを重ねると、制作者の意図した通りにボタンの説明が表示されるが、Firefoxでは変化がない。下が画像のimg要素部分のソース
< a href="login.html" img src="login.gif" width="130" height="32" alt="ここを押すとサービスにログインします" >
htmlソースをご覧になって、alt属性に代替テキストも入っているし、問題ないのでは？と思われる方もいるかもしれません。ですが、上記の例はツールチップの機能としても、代替テキストの機能としても問題があります。もし利用者がInternet Explorerでページにアクセスしてきた場合にはツールチップが有効かもしれません。しかし、利用者は必ず制作者が意図したブラウザでページにアクセスしてくるわけではありません。
また、このような代替テキストはその情報を必要とする音声ブラウザやスクリーン・リーダーの利用者が効率よく情報を入手できず不便です。以下の読み上げ音声を聞いてください。
代替テキストをツールチップとして使用したページを読み上げた音声。画像リンク部分で冗長な読み上げが行われる この音声でもわかる通り、ログイン画面とヘルプ表示にリンクするボタン画像は、それぞれ「ここを押すとサービスにログインします」、「ここを押すとログインに関するヘルプを表示します」という一文が読み上げられています。
わかりやすいのではないか、と思う方もいるでしょうが、効率よく目的の情報を入手したい多くの利用者にとっては代替テキストがわずらわしく感じられる例です。この場合は「ログイン」や「ヘルプ」という代替テキストが設定されていれば、より効率的に探している情報に到達できるのです。
それでは、代替テキストとツールチップ、それぞれを必要とする利用者に向けて表示する適切な方法はないのでしょうか？
現在考えられる代替案は、img要素にtitle属性を用いる方法です。以下のソースは、画像の説明となるalt属性には「ログイン」を、マウスを画像に近づけたときに表示される文字列には「ここを押すとサービスにログインします」と設定した例です。
< a href="login.html" img src="login.gif" width="130" height="32" alt="ログイン" title="ここを押すとサービスにログインします" >
上記のようにalt属性とtitle属性を使い分けることで、音声読み上げ環境の利用者には簡潔な代替テキストを、IE6などのブラウザ利用者には詳細な画像の説明をツールチップで提供できるようになります。
ただ、title属性を用いた場合には使用するブラウザによっては制作者が意図した通り表示されないこともありえるので、ツールチップとして利用する場合には十分に注意してください。
テキストと画像の重複読み上げ問題
最後にテキストと画像の重複読み上げについて述べていきます。
Webサイトの中には、しばしば情報をアイコンなどの画像とテキストの両方で表したものがあります。商品名と商品画像が代表例です。たとえば、あるメーカーのページで売り出し中の商品Aを画像付で紹介しているとしましょう。商品Aの名称を「商品A」というテキスト情報で表示し、商品Aの画像にも「商品A」という代替テキストを設定した場合、音声ブラウザやスクリーン・リーダーなどでは同じ内容が2度読み上げられてしまいます。このようなケースは、音声読み上げ環境でWebサイトにアクセスしている利用者にとっては大変わずらわしいものです。
こうした場合、画像側の代替テキストを「alt=""」と設定しておくことで、重複読み上げを回避することができます。
ここまで代替テキストの設定に関する問題と解決法について述べてきましたが、Web上で画像を使用する場合、代替テキストを適切に設定することは利用者が目的の情報を効率よく入手するために不可欠であることがおわかりいただけたかと思います。
次回は、本連載でもしばしば取り上げているナビゲーションスキップを含む音声読み上げのための情報についてご紹介します。
次回につづく
