2001年08月19日
ご無沙汰しております。無事HIS2001向けの予稿集原稿も提出しまして、ほっ と一息というところです。
さて、今回は先日IBMが開発／販売する「ホームページリーダー Windows版Ver3.01」（以下ホームページリーダー）を入手したので、これを機に音声読み上げブラウザ向けのWebデザインについて考察してみたいと思います。
ホームページ・リーダー v3.01とガイドライン
ホームページリーダーの詳細な製品情報は以下でごらんになれます。
http://www-6.ibm.com/jp/accessibility/soft/hpr.html#navskip
ホームページリーダーは読んで字の如く、音声でホームページの内容を読み上げてくれるソフトです（'read'にはちゃんと「音読する」って意味があったんですね。あれっと思って辞書ひいちゃいました）。視覚障害者の方でもWebブラウジングを楽しめるように開発された製品です。ただひたすら読み上げるだけではなく、例えばアンカー（リンク）の部分だけ声色を変えたりしてくれます。更に最新版のVer3.01では弱視者の方向けに、別フレームに読み上げ中のパラグラフだけ大きいフォントで表示してくれたりします。ブラウザのフォントサイズ変更機能を使うとレイアウトが壊れてしまったりするんですが、これは元のブラウザの表示を保ったまま、別フレームで表示してくれる点がポイントです。元フレームでは、どこを拡大表示しているかわかるように反転表示されます。
IBMのサイトでは、「バリアフリーの扉」というアクセシビリティ情報ページで、音声読み上げブラウザ利用時に「聴きやすい」ホームページのデザイン上のポイントを示しています。
IBM バリアフリーの扉
http://www-6.ibm.com/jp/accessibility/
Webデザインをされてる方ならお馴染みの、「画像タグにはALTオプション（画像表示非対応、禁止設定のブラウザでかわりに表示するラベルを指定するためのもの）をつけましょう（読み上げブラウザでは画像の代わりにこれを読み上げるため）」といったものや、音声読み上げが途切れる改行タグの挿入位置に配慮しましょう、といったガイドラインが掲載されています。
今回σ(^^)は、上記ガイドラインで触れられていない、フォームの読み上げブラウザ対応について考察してみました。eコマース・サイトなどで必ず必要になってきますよね。
多種のフォーム・オブジェクトを無意味に多用しない
一般的な通販サイトの申し込みフォームを考えてみると、１ページに様々なフォームがてんこ盛りです。名前や住所を記入するtextフォーム、性別などを選択するラジオボタン、都道府県やクレジットカード情報に使われるselectタグによるメニュー、サイトからのお知らせを受け取るかどうか指定するチェックボックス、備考欄にtextareaタグによる複数行テキストボックス。HTMLで設定できるありとあらゆるフォーム・オブジェクトが勢揃いしています。これって晴眼者の我々でも結構大変ですよね。例えばこんなフォームをよく目にします。
|
生年月日：年 月 日 |
この例では、月をマウスで選択しなければならない（キーボードで操作する人は希でしょう）ので、結果として手がキーボードとマウスを行ったり来たりすることになります。
目で見てそれがどの形式のフォーム・オブジェクトであるか判別できる我々にとっても煩雑なこの手のフォーム、読み上げブラウザで利用するのはもっと大変です。
実際に上記フォームをホームページリーダーにかけると以下のようになります（弱視者用拡大表示ペインからコピー。実際にはセミコロンやカッコなどは読み上げられません）。
生年月日：[テキスト。]年
(12 個の選択メニューの先頭。)
1[選択されました。]
(選択メニューの最後。)月 [テキスト。]日
文字で読んでもわけわかんないですよね。更に声で聞く場合はカッコも抜きなわけですから、「せいねんがっぴ、てきすと、ねん、じゅうにこのせんたくめにゅーのせんとう、いち、せんたくされました、せんたくめにゅーのさいご、つき、てきすと、ひ」となります。
単純にこれだけを見ても、いかに我々がなにげなく利用している視覚情報（改行位置、「ひ」は「火」ではなく「日」であることなど）が重要なものであるかわかります。例えばラジオボタンのグルーピングなども、明示してなくてもこういった位置関係を手がかりに解釈可能ですが、読み上げブラウザを利用する場合は別途配慮が必要になります。
我々はつい高級そうなフォーム・オブジェクトを使ってしまいがちです（テキスト・フォームよりメニューの方が高級っぽい）。しかし「高級なユーザインターフェイスが常に最適なユーザエクスペリエンスを提供するとは限らない」のです（この辺りは次のコラムのネタにしたいと思います）。
フォーム・オブジェクトの選択は、それが高級そうに見えるかどうかではなく、ユーザにとって最適であるかどうかを基準に選ぶ必要があるでしょう。
フォーム・オブジェクト判別のための文言の工夫
どうしても種々のフォーム・オブジェクトを混成させる必要がある場合もあるでしょう。先の例で言えば、自由記入より選択式の方が、単に「高級っぽい」って理由の他に、「入力ミスを心配しなくて良くなる」という利点もあります。
このような場合にできる工夫はないかという点についても考察してみました。
とりあえず思いついたのは、前後の説明ラベルの工夫ですね。例えば、
| 名前を入力してください | |
| 性別を入力してください |
よりは、
| 名前を記入してください | |
| 性別を選択してください |
の方が、後に続くフォーム・オブジェクトがどのタイプのものか絞れて良い気がします。
フォームの項目数
ホームページリーダーは、標準ではページ先頭から最後までいっきに読み上げを行います（もちろんキーボード操作で停止したり戻ったりは可能なんですが、ある程度慣れが必要でしょう）。１ページにあまり多くの質問項目が多いと、読み上げブラウザで回答するのは困難になるでしょう。質問の区切りがや、質問同士の関連などが、晴眼者であれば位置関係や区切り線でなんとなく判断できるんですが、音声だけではそれも難しいからです。可能であれば１ページにつき１問（あるいは１グループ）が理想ではないでしょうか。ただ全部回答するまで回線をオンラインにしておく必要がでてきてしまうというトレードオフもあります。問題番号を整理して記入しておくことで、多少は改善できるかも知れません。「ここからは２問目」、「これはまだ２問目のC」といった階層構造を明示するのです。質問項目そのものに明示的にナンバリングするのもいいでしょうし、画像で境界線を入れている場合は、そのALTオプションに問題番号を入れてみるのもいい手ではないでしょうか。そうすれば通常のブラウザでは境界線が表示され、読み上げブラウザでは代わりに今何問目から音声で読み上げられるというワケです。
ご意見をお聞かせ下さい
以上の内容は、σ(^^)自身が読み上げブラウザの１製品であるホームページリーダーを触った範囲で考察したものに過ぎません。是非実際の視覚障害を持つ方や識者の方のご意見を伺って考察を深めたいと思っています。「いや、実はこうなっているのが私たちには一番都合が良いのだ」といったお話をメールでも以下の公開コメント欄でも結構ですのでお寄せいただけたら幸いに思います。