図3  ホームページ・リーダーが読み上げ可能なフォームの例<BR>米IBM社のホームページ・リーダーでは,ラベルに対応して説明を読み上げる。名前を入力する<label for= "Name1"> 名前 </label>に対しては,実際に入力する前に「テキスト,名前,編集」と読み上げる。
図3 ホームページ・リーダーが読み上げ可能なフォームの例<BR>米IBM社のホームページ・リーダーでは,ラベルに対応して説明を読み上げる。名前を入力する<label for= "Name1"> 名前 </label>に対しては,実際に入力する前に「テキスト,名前,編集」と読み上げる。
[画像のクリックで拡大表示]

中級:入力フォームと解説を配慮する

 中級レベルに進むと,オンライン・ショッピングやバンキング,Web検索などでよく目にする入力フォーム(FORMタグ)のアクセシビリティが問題となる。FORMタグの使いやすさは単にそのページがガイドラインに準拠しているかどうかでは評価できない。音声ブラウザを用いて,あるタスクがどのように処理されるのかを一度経験することが効果的だ*4

 視覚を利用できないユーザーは聴覚を最大限に生かし,わずかな手がかりをたどってWebアクセスしている。手がかりが増えれば増えるほど使いやすさは向上する。その手がかりの主要ポイントを示す。

【ポイント1】 INPUTタグにはその直前に対応するラベルを付加する

 米IBM社のホームページ・リーダーでは,ラベルに対応した説明を読み上げるので,その入力ボックスが示す項目を瞬時に理解できる。例えば,名前を入力するラベルが記述してある入力欄では,実際に入力する前に「テキスト,名前,編集」と読み上げる(図3[拡大表示])。

【ポイント2】 現在表示されているページが何ステップ目になるのかを常に提示する

 オンライン・ショッピングやバンキングでは,一つのタスクが完了するまでにいくつものステップが存在するので,新しいページが読み込まれたときに「これは10ステップ中3ステップ目です」などと提示する。こうすれば残り7ステップであることが容易に理解できる。

【ポイント3】 IDやパスワードの入力ミスなどエラーがあった場合,そのエラーの内容を早い段階で(ページの上のほうで)読み上げる

 入力ミスをした位置で「名前の入力形式が間違っています」などと提示されると,その場所に到達するまで,送信したはずのページが再度表示されている理由を理解できないからだ。また,ページの中央から後方に,他の情報に紛れて提示されていると読み落としの原因にもなる。エラー・メッセージがページの先頭付近にテキストとして提示できない場合は,画像のalt属性を利用してもよい。

【ポイント4】 前述の本文へのスキップリンクを準備する

 これはWeb検索や商品検索の結果画面には,結果と異なるナビゲーション・リストがページの上部に存在するためだ。結果と異なる情報が上部に多いと,検索結果に到達するまでに時間がかかりすぎたり,どの項目が検索結果に対応するのか特定できないこともある。

【ポイント5】 検索結果にヒットした件数と,現在のページに何件表示しているかを表示する

 これは【ポイント3】のエラー・メッセージと同様に,ページの先頭付近で提示してほしい。私は散々ページの中をさまよった後に,「該当する項目がなかった」という情報にたどり着いた経験が何度もある。何よりも先にその情報が読み上げられてほしい。

【ポイント6】 商品の説明はなるべく詳細に示す

 一般に画像の代替テキストは端的に記述することが適切であると述べたが,オンライン・ショッピングにおける商品画像の説明はその範囲外と考えてよい。よく見られる代替テキストとして「商品の発送時の様子」とか「ボトルの写真」などがあるが,せめて「商品の発送時の写真:ホワイトとブラックのチョコレートがそれぞれ10枚と数種類のクッキーの詰め合わせ。箱はすっきりとしたシルバー」くらいの解説がほしい。

 また,ファッションのサイトなどの写真なら,商品の詳細だけでなくその商品を身につけているモデルの様子なども合わせて記述してもらえるととても親切だ。例えば20代の男性が音声情報だけでシャツを探しているときに,気に入った商品があっても,もし50代のモデルが着ていたら別の商品を選ぶかもしれない。

上級:JavaScriptとFlashを考慮

 最後に上級レベルを見よう。上級で何を配慮すべきか,これは少し難しい。なぜならaDesignerをはじめとしたツールでの評価は困難となるし,何より解決できない問題も生じているからである。

 ここではJavaScriptとFlashについて考えてみたい。1997年に音声ブラウザを開発した時,JavaScriptはまだそれほど広くは利用されていなかった。その後,Webアプリケーションなどで広く用いられるようになると,音声ブラウザではまったくアクセスできなかった。それだけでなく,JavaScriptで記述されたFORMであるかどうかすら,何かアクションを起こすまで確認できないありさまだった。

 例えば,あるFORMに入力し最後にサブミットのボタンを押そうとする。HTMLのFORMタグ内であれば,選択メニューで項目を選択し,サブミット・ボタン(データ送信用のボタン)を押すというのが標準のインタフェースである。だが,JavaScriptで書かれているとサブミット・ボタンがない。キーボードでは操作できないことが分かり,初めてJavaScriptが使われていることに気付くのだ。そこから先には進めず,せっかく入力した情報は水の泡。JavaScriptで書かれたページが急増するにつれ,頻繁にこういった問題に遭遇するようになった。

 現在では,このような単純なJavaScriptであれば簡単にアクセスできるようになっている。マウスだけでなくキーボードでも同じ操作ができるようにしておくと,音声ブラウザを使って操作できるようになる。問題はJavaScriptの使用形態が進化し続けていることである。それどころか,Webにこれまでとは異なる新たなインタフェースが登場し始めた。Ajax(Asynchronous JavaScript+XML)を用いる「Google Suggest」や「Google Map」,ブログなどで使われるJavaScriptで実装されたリッチ・テキスト編集機能などだ。これらのスクリプトをアクセシブルにすることは非常に難しい*5

 次にFlashの問題である。Flashのアクセシビリティを考えるとき,リンクとフォーム入力を持った“HTMLのようなアプリケーション”とムービーとを分けて考えなければならない。まずリンクに関してはalt属性を付けてスクリーン・リーダーで読み上げられるかを確認してほしい。FORMをFlashで開発する場合には,まずキーボードでナビゲーションできるように配慮することが大切だ*6。一方,複雑なアニメーションを持ったFlashコンテンツの場合は同時に流れる音声により補える。これはテレビと共通した面があり,視覚障害者のために音声による解説が準備されている番組もまれに存在する。


浅川 智恵子 Chieko Asakawa/日本アイ・ビー・エム 東京基礎研究所 主席研究員

日本アイ・ビー・エム 東京基礎研究所 主席研究員
中学時代にプールでの怪我がもとで失明。1982年に大学の英文科を卒業。1985年に日本IBM入社。2004年に東京大学工学系研究科博士課程終了。入社後はアクセシビリティ技術の研究開発に従事。1997年に視覚障害者でもネットサーフィンが楽しめるソフト「ホームページリーダー(HPR)」を開発。現在11カ国語に対応。2004年に視覚障害者や高齢者にとってのウェブサイトの使い勝手を評価できるソフト「エーデザイナー」を開発し,現在体験版が公開中。これらの功績により,1999年厚生大臣表彰を受賞,2003年に米国女性技術者団体WITI(Women In Technology International)が選定する女性技術者の殿堂入り,日本女性科学者の会功労賞受賞,日経ウーマンWoman of the Year 2004で総合2位,2004年第3回日本イノベーター大賞(日経BP社が主催)において優秀賞を受賞。