Comments
Description
Transcript
音声読み上げに配慮したWebデザイン
ユニバーサルデザインに向けた取り組み ユニバーサルデザイン Webデザイン 音声ブラウザ 音声読み上げに配慮したWebデザイン あ さ の よ う こ わたなべ まさひろ 浅野 陽子 /渡辺 昌洋 Webは視覚的情報表現が基本となるため，視覚障害者にとっては特にアク セスの障壁が大きいのが現状です．そこで， Webコンテンツを音声で読み上 お か の あや 岡野 紋 げてアクセスする場合の問題点を考慮したWebデザインの検討事例を紹介し NTTサイバーソリューション研究所 ます． 音声読み上げに配慮したWebデザ イン検討の重要性 が多いのが現状です．特に視覚障害者 考慮したWebデザインを採用すること にとっては，GUI（Graphical User が重要です． Interface）操作と視覚的表示が基本 音声ブラウザによるWeb読み上げ インターネットの普及に伴い，幅広 となるWebコンテンツについては，情 いユーザがいろいろな環境，いろいろ 報を取得するのに大きな障壁がありま な用途でWebを利用するようになって す．視覚障害者の多くは，音声ブラウ 音声ブラウザは，WebのHTMLな きています．特に高齢者や障害者など ザを用いてWebコンテンツを音声で読 どのソースを解析してコンテンツを読 外へ出る機会が少ないユーザにとって み上げて情報を取得しています．しか み上げます．例えば，見出しやリスト， は，Webは社会との重要な接点の１ し，テキスト以外の読み上げが困難な 画像，表などのタグを認識して音を変 つとなっています．しかし，高齢者や コンテンツについては，情報が欠けて えて読み分けたり，画像については， 障害者は，操作性や情報構造の把握 しまい理解が難しい場合があります． 代替テキスト情報としてそのalt属性に などにおいてWebを利用する際に問題 したがって，音声で読み上げる場合も 記述されたテキストを読み上げます． の現状 野比市トップ テキスト 検索 ボタン 市役所からのお知らせ 市長選挙の告示 税金・年金・健康保険等のお支払い 税金 国民年金 国民健康保険 介護保険 ゴミ・衛生 家庭ゴミ 環境衛生 産業廃棄物 土砂の埋め立て 交通 交通安全 公共交通 自転車置場 … 図１ 音声ブラウザでの読み上げ例 42 NTT技術ジャーナル 2005.8 特 集 しかし，ソースに記述された順に読 理解できます．しかし，音だけで聞く デザインする際に特に注意が必要です． み上げるので，二次元的に表現された 場合は，普段の会話であまり使われな その他，指摘事項の中には，誤記や 情報を把握しにくく，かつ情報把握に い用語に関しては，理解が難しい場合 表記ミス，内容の整合性，HTMLの 時間がかかるという問題があります． があります．もう一点，理解が難しい 記述ミスなどもありましたが，これは 例えば，図１のようなWebコンテンツ と指摘された用語として，例えば「差」 校正やHTMLのチェックの徹底によっ を音声ブラウザで読み上げると，吹き などの音が短い用語がありました．こ て解消できるでしょう． 出しのようにテキスト部分が順に読み れは，評価者が戻って聞き直している 上げられ，タイトル部分や階層構造が ことから，聞き逃してしまう恐れもあ 認識できません．また現在の音声ブラ ると考えられます． Webアクセシビリティデザインへ の配慮 今回の評価で指摘された事項の中に ウザでは，十分な日本語解析ができ 見出しの判別についての問題は，画 ず，漢字を読み間違うという問題も多 面では，行間やインデント，文字の大 は，既存のガイドライン く生じています． きさ等のレイアウトから，話のまとま されているものの，チェックツールでは りや段落の区切りが理解できますが， 判別できず人間の判断に依存するもの 音声ブラウザでは，スタイルシートや で，具体的に何が悪くて何を改善しな インデントは無視してページの先頭か ければいけないのかが分からないために ら途切れなく単調に読んでいくので， 生じた問題もあります．例えば，この 際のWebデザインの具体的問題点を把 情報の構成を理解するのが難しいと考 用語はこの文脈では音声ブラウザでど 握するために，晴眼者と全盲者それぞ えられます．このような全盲者だけが う読まれるか，この記号は音声ブラウ れに，音声ブラウザを使ってWebにア 指摘している問題は，晴眼者は見落と ザで読み上げられるかなどは，音声ブ クセスする際の問題点を指摘してもら しがちであることから，Webサイトを ラウザによっても異なり，確認が困難 音声ブラウザによるWebアクセシ ビリティ評価事例 音声ブラウザでWebにアクセスする (1)，(2) にも規定 いました．晴眼者には，画面を見なが ら音声ブラウザによる読み上げを聞い てもらいました．指摘された問題点を， その内容から分類して集計した結果を 50 全盲者だけ指摘 図２に示します． 両者に共通して指摘が多かったのは， 漢字の読み間違いです．これは，音声 40 晴眼者だけ指摘 両者指摘 30 ブラウザが持っている辞書や日本文解 析の機能に依存します． 20 一方，晴眼者だけが指摘している問 題点で多かったのは，内容の分かりに 10 くさや一貫性・整合性です．この問題 点については，全盲者の指摘は少な かったのですが，これは全盲者が内容 を理解していた訳ではなく，全体を見 通しての文脈や内容の流れまでつかめ ていなかったためと考えられます． 逆に，全盲者だけが指摘している問 0 読 み 間 違 い ︵ 音 ︶ 読 み 間 違 い ︵ 文 脈 ︶ 読 み 落 と し タ グ ・ リ ン ク の 不 具 合 誤 記 文 法 ミ ス 不 慣 れ な 用 語 見 に く さ 内 容 の 整 合 性 ・ 一 貫 性 内 容 の 分 か り に く さ 図 表 の 分 か り に く さ 見 出 し の 判 別 し に く さ 本 文 ・ 段 落 の 開 始 終 了 題点で多かったのは，不慣れな用語の 理解や見出しの判別です．多少不慣れ 図２ Webアクセシビリティに関する指摘項目 な用語でも漢字を見れば大抵は意味が NTT技術ジャーナル 2005.8 43 ユニバーサルデザインに向けた取り組み です．漢字の読み間違いの問題も含 読む前に，情報のまとまりや位置，タ 段 落 へリンクしているページメ め，これらの問題の多くは，音声ブラ イトルなどで，情報のまとまりどうし ニューを付加して，必要な部分に ウザの機能向上によって将来解消され の関係を把握し，情報構造の枠組み 飛ぶことができるようにする． ていくと考えられます．しかし，すべ を形成していると考えられます．また ・タイトルに項目番号を付けて，現 てのユーザが高機能な音声ブラウザを 記載されている情報の量やスクロール 使うとは限らないことを考え，なるべ バーの位置で，全体の情報量をつかん ・いくつかの項目がリストとして並 く読み間違いの少ない漢字表現を使っ でいると考えられます．タイトルは，必 んでいる場合，最初に何項目ある たり，特殊な文字や表現は用いないよ 要な情報であるかどうか，つまり読み かを説明する． うにしたり，客観的に考えて誤解され 飛ばすかどうかの判断にも使われてい にくい表現にしたりするなどの配慮が ます．しかし，音声ブラウザでは初め 必要です． から順を追って情報を読んでいくため， 一方，見出しが判別しにくいなどの 初めに情報構造をつかむことが難しい (3) 在位置を把握しやすいようにする． ・項目リストや段落の終わりに，終 わりであることを説明する． 上 記 の解 説 の内 容 は， 晴 眼 者 に とってはすでに視覚的配置などから得 指摘があった情報構造の分かりにくさ のです ．そこで，音声ブラウザで情 られている情報であるので，さらに文 については，既存のガイドラインでは， 報にアクセスする際も，これらに対応 字情報を付加することは，かえって情 十分に規定されているとはいえません． する情報を初めに音声で解説するナビ 報が冗長になってしまいます．そこで， そこで次に，この情報構造のデザイン ゲーションを提案しました．具体的な 視覚的には見えず音声だけで情報構造 についての具体的検討を紹介します． 解説方法としては，図３の吹き出しの を解説するデザインにすることにしまし ような位置に，次の５種類の解説を付 た．これを実現するにはいくつかの方 加する方法を考えました． 法がありますが，今回は，現在一番よ 情報構造の音声ナビゲーションの デザイン ・ページの始めに，ページの構成の 晴眼者がWeb画面から情報構造を 把握する際，まず具体的情報内容を 説明をする． く使われている透明画像を貼り付けて そのalt属性に解説文を記述して読み ・ページの始 めに， ページ内 の各 上げる方法を使いました． ページ構成 このページには，タイトル の次に本文があります． 本文は主にリンク集です． リスト数 項目番号 ページメニュー … ページメニュー 14 個の項目があります． 1.市役所からのお知らせ 2.税金・年金・健康保険 3.ゴミ・衛生 4.交通 4 つのリンクが あります． 2 段落の終了 項目の終わりです． 図３ ページ構成の音声解説の例 44 NTT技術ジャーナル 2005.8 特 集 音声ナビゲーションデザインの評価 提案した音声ナビゲーション方法に 得ました．また最初に項目数を説明す る効果についても同様に，全体の量が 把握でき安心するとの評価を得ました． ついて，どのような解説および表現が さらに，項目のタイトルに項目番号を 音声ブラウザでの情報構造把握に有効 付与したことにより，タイトルである であるかを，音声解説が付いていない ことの認識に役立つとともに，順序や 同じ内容のWebサイトと比較して評価 現在位置把握の手掛かりに大変役に しました．今回の評価では，音声ブラ 立ったという評価を得ました． ウザで画面は見ずに音声読み上げだけ ユーザがもっとも苦労したのは，情 でWebにアクセスし，情報把握に際し 報の階層化と区切りで，最初にページ て分 かりやすかった点 ， 分 かりにく メニューを設 けて同 ページ内 の各 タ かった点を調べました． イトルへリンクを張ったことにより， その結果，情報構造の音声解説が ページメニューで１ページが終わり，そ ある方が，総じて高い評価を得ました． こからジャンプしたタイトルごとに別に 解説がない方のサイトでは，階層構造 １ページで構成されるといった構造と のレベルが分からず項目のタイトルと 誤解していたことが分かりました． 内容のリストとの区別がつきにくかっ たとの意見が報告されました． 個別の解説についての評価としては， 音声ナビゲーションを付加することは， ユーザがあらかじめ情報構造を想定す ることができ，有効であることが分か た効果については，ユーザはあまり意 りました．特に，情報の量や順序を説 識しておらず，解説の内容をあまり理 明する解説は非常に有効です．ただ 解していなかったという結果となりま し，音声で情報を取得する場合は，視 した． 特 に， 音 だけで聞 く場 合 は， 覚的な情報構造とは異なった単位でと 「ページ」「本文」「メニュー」「項目」 らえる可能性があるため，「ページ」な といった単位が把握しにくく，解説の どといった情報単位を表す表現の使用 表現にも問題があったようです．同様 に注意する必要があるとともに，内容 に，項目リストや段落の終わりである と解説が容易に区別できるようにデザ ことを説明する効果についても，何が インする必要があります． という報告がありました．またこのよ うな解説をつけたことにより，情報の （左から）渡辺 昌洋/ 浅野 陽子/ 音声読み上げに配慮したWebデザ インのチェック方法 内容の一部なのか，情報構造の解説な 音声読み上げに配慮したWebデザイ のかの区別がつかず混乱したという指 ンになっているかどうかをチェックする 摘もありました． には，まず自分で音声ブラウザでの読 一 方 ， ページの始 めにページメ ニューを付 加 した効 果 については， (1) 日本工業基準調査会：“JIS X8341-3:2004 高 齢者・障害者等配慮設計指針−情報通信にお ける機器， ソフトウェア及びサービス−第三 部：Webコンテンツ，”日本規格協会，2004． (2) 渡辺・岡野・浅野： “ユニバーサルデザイン ガイドライン，”NTT技術ジャーナル，Vol.17， No.8，pp.38-41，2005. (3) 福田・高木・前田・浅川：“視覚障害者のた めのWebページ構造提示手法，”ヒューマン インタフェース学会論文誌，Vol.５，No.１， pp.465-474，2003. 以上の結果より，情報構造について ページの始めにページの構成を説明し 終わりなのかがよく理解できなかった ■参考文献 岡野 紋 たとえガイドラインにのっとりさまざま な配慮をして作成したWebデザインであっ ても，アクセシビリティのチェックは必要 です．Webデザインのプロセスで，このア クセシビリティチェックと改善を必ず行う ようにお願いします． み上げを聞いて確認してみることが一 番です．また今回の評価事例のように， 「ページメニュー」という用語は理解し 最低１人でも音声ブラウザの実ユーザ にくかったものの，最初にページ全体 に実際に使って評価してもらうことに の構成や量，内容が把握できたという よって，それまで気づかなかったたく ことで，大変役に立ったという評価を さんの問題が抽出されるでしょう． ◆問い合わせ先 NTTサイバーソリューション研究所 ヒューマンインタラクションプロジェクト TEL 046-859-3171 FAX 046-859-5560 E-mail [email protected] NTT技術ジャーナル 2005.8 45