音声読み上げに配慮したWebデザ

イン検討の重要性

インターネットの普及に伴い，幅広

いユーザがいろいろな環境，いろいろ

な用途でWebを利用するようになって

きています．特に高齢者や障害者など

外へ出る機会が少ないユーザにとって

は，Webは社会との重要な接点の１

つとなっています．しかし，高齢者や

障害者は，操作性や情報構造の把握

などにおいてWebを利用する際に問題

が多いのが現状です．特に視覚障害者

にとっては，GUI（Graphical User

Interface）操作と視覚的表示が基本

となるWebコンテンツについては，情

報を取得するのに大きな障壁がありま

す．視覚障害者の多くは，音声ブラウ

ザを用いてWebコンテンツを音声で読

み上げて情報を取得しています．しか

し，テキスト以外の読み上げが困難な

コンテンツについては，情報が欠けて

しまい理解が難しい場合があります．

したがって，音声で読み上げる場合も

考慮したWebデザインを採用すること

が重要です．

音声ブラウザによるWeb読み上げ

の現状

音声ブラウザは，WebのHTMLな

どのソースを解析してコンテンツを読

み上げます．例えば，見出しやリスト，

画像，表などのタグを認識して音を変

えて読み分けたり，画像については，

代替テキスト情報としてそのalt属性に

記述されたテキストを読み上げます．

ユニバーサルデザインに向けた取り組み

NTT技術ジャーナル 2005.842

音声読み上げに配慮したWebデザイン

野比市トップ　テキスト 検索 ボタン�市役所からのお知らせ　市長選挙の告示�税金・年金・健康保険等のお支払い�税金 国民年金 国民健康保険 介護保険�ゴミ・衛生 家庭ゴミ 環境衛生 産業廃棄物�土砂の埋め立て 交通 交通安全 公共交通�自転車置場 …�

図１　音声ブラウザでの読み上げ例�

Webは視覚的情報表現が基本となるため，視覚障害者にとっては特にアクセスの障壁が大きいのが現状です．そこで，Webコンテンツを音声で読み上げてアクセスする場合の問題点を考慮したWebデザインの検討事例を紹介します．

あ さ の よ う こ わたなべ まさひろ

浅野 陽子　/渡辺 昌洋お か の あや

岡野 紋

NTTサイバーソリューション研究所

ユニバーサルデザイン Webデザイン 音声ブラウザ

特集

NTT技術ジャーナル 2005.8 43

しかし，ソースに記述された順に読

み上げるので，二次元的に表現された

情報を把握しにくく，かつ情報把握に

時間がかかるという問題があります．

例えば，図１のようなWebコンテンツ

を音声ブラウザで読み上げると，吹き

出しのようにテキスト部分が順に読み

上げられ，タイトル部分や階層構造が

認識できません．また現在の音声ブラ

ウザでは，十分な日本語解析ができ

ず，漢字を読み間違うという問題も多

く生じています．

音声ブラウザによるWebアクセシ

ビリティ評価事例

音声ブラウザでWebにアクセスする

際のWebデザインの具体的問題点を把

握するために，晴眼者と全盲者それぞ

れに，音声ブラウザを使ってWebにア

クセスする際の問題点を指摘してもら

いました．晴眼者には，画面を見なが

ら音声ブラウザによる読み上げを聞い

てもらいました．指摘された問題点を，

その内容から分類して集計した結果を

図２に示します．

両者に共通して指摘が多かったのは，

漢字の読み間違いです．これは，音声

ブラウザが持っている辞書や日本文解

析の機能に依存します．

一方，晴眼者だけが指摘している問

題点で多かったのは，内容の分かりに

くさや一貫性・整合性です．この問題

点については，全盲者の指摘は少な

かったのですが，これは全盲者が内容

を理解していた訳ではなく，全体を見

通しての文脈や内容の流れまでつかめ

ていなかったためと考えられます．

逆に，全盲者だけが指摘している問

題点で多かったのは，不慣れな用語の

理解や見出しの判別です．多少不慣れ

な用語でも漢字を見れば大抵は意味が

理解できます．しかし，音だけで聞く

場合は，普段の会話であまり使われな

い用語に関しては，理解が難しい場合

があります．もう一点，理解が難しい

と指摘された用語として，例えば「差」

などの音が短い用語がありました．こ

れは，評価者が戻って聞き直している

ことから，聞き逃してしまう恐れもあ

ると考えられます．

見出しの判別についての問題は，画

面では，行間やインデント，文字の大

きさ等のレイアウトから，話のまとま

りや段落の区切りが理解できますが，

音声ブラウザでは，スタイルシートや

インデントは無視してページの先頭か

ら途切れなく単調に読んでいくので，

情報の構成を理解するのが難しいと考

えられます．このような全盲者だけが

指摘している問題は，晴眼者は見落と

しがちであることから，Webサイトを

デザインする際に特に注意が必要です．

その他，指摘事項の中には，誤記や

表記ミス，内容の整合性，HTMLの

記述ミスなどもありましたが，これは

校正やHTMLのチェックの徹底によっ

て解消できるでしょう．

Webアクセシビリティデザインへ

の配慮

今回の評価で指摘された事項の中に

は，既存のガイドライン(1)，(2)にも規定

されているものの，チェックツールでは

判別できず人間の判断に依存するもの

で，具体的に何が悪くて何を改善しな

ければいけないのかが分からないために

生じた問題もあります．例えば，この

用語はこの文脈では音声ブラウザでど

う読まれるか，この記号は音声ブラウ

ザで読み上げられるかなどは，音声ブ

ラウザによっても異なり，確認が困難

全盲者だけ指摘�

晴眼者だけ指摘�

両者指摘�

0

10

20

30

40

50

読み間違い（音）�

読み間違い（文脈）�

読み落とし�

タグ・リンクの不具合�

誤記�

文法ミス�

不慣れな用語�

見にくさ�

内容の整合性・一貫性�

内容の分かりにくさ�

図表の分かりにくさ�

見出しの判別しにくさ�

本文・段落の開始終了�

図２　Webアクセシビリティに関する指摘項目�

です．漢字の読み間違いの問題も含

め，これらの問題の多くは，音声ブラ

ウザの機能向上によって将来解消され

ていくと考えられます．しかし，すべ

てのユーザが高機能な音声ブラウザを

使うとは限らないことを考え，なるべ

く読み間違いの少ない漢字表現を使っ

たり，特殊な文字や表現は用いないよ

うにしたり，客観的に考えて誤解され

にくい表現にしたりするなどの配慮が

必要です．

一方，見出しが判別しにくいなどの

指摘があった情報構造の分かりにくさ

については，既存のガイドラインでは，

十分に規定されているとはいえません．

そこで次に，この情報構造のデザイン

についての具体的検討を紹介します．

情報構造の音声ナビゲーションの

デザイン

晴眼者がWeb画面から情報構造を

把握する際，まず具体的情報内容を

読む前に，情報のまとまりや位置，タ

イトルなどで，情報のまとまりどうし

の関係を把握し，情報構造の枠組み

を形成していると考えられます．また

記載されている情報の量やスクロール

バーの位置で，全体の情報量をつかん

でいると考えられます．タイトルは，必

要な情報であるかどうか，つまり読み

飛ばすかどうかの判断にも使われてい

ます．しかし，音声ブラウザでは初め

から順を追って情報を読んでいくため，

初めに情報構造をつかむことが難しい

のです(3)．そこで，音声ブラウザで情

報にアクセスする際も，これらに対応

する情報を初めに音声で解説するナビ

ゲーションを提案しました．具体的な

解説方法としては，図３の吹き出しの

ような位置に，次の５種類の解説を付

加する方法を考えました．

・ページの始めに，ページの構成の

説明をする．

・ページの始めに，ページ内の各

段落へリンクしているページメ

ニューを付加して，必要な部分に

飛ぶことができるようにする．

・タイトルに項目番号を付けて，現

在位置を把握しやすいようにする．

・いくつかの項目がリストとして並

んでいる場合，最初に何項目ある

かを説明する．

・項目リストや段落の終わりに，終

わりであることを説明する．

上記の解説の内容は，晴眼者に

とってはすでに視覚的配置などから得

られている情報であるので，さらに文

字情報を付加することは，かえって情

報が冗長になってしまいます．そこで，

視覚的には見えず音声だけで情報構造

を解説するデザインにすることにしまし

た．これを実現するにはいくつかの方

法がありますが，今回は，現在一番よ

く使われている透明画像を貼り付けて

そのalt属性に解説文を記述して読み

上げる方法を使いました．

ユニバーサルデザインに向けた取り組み

NTT技術ジャーナル 2005.844

ページ構成�

このページには，タイトル�の次に本文があります．�本文は主にリンク集です．��

ページメニュー�

ページメニュー�14 個の項目があります．�1.市役所からのお知らせ�2.税金・年金・健康保険�3.ゴミ・衛生�4.交通�� …

�

4 つのリンクが�あります．�

2

項目の終わりです．�

リスト数�

項目番号�

段落の終了�

図３　ページ構成の音声解説の例�

特集

NTT技術ジャーナル 2005.8 45

音声ナビゲーションデザインの評価

提案した音声ナビゲーション方法に

ついて，どのような解説および表現が

音声ブラウザでの情報構造把握に有効

であるかを，音声解説が付いていない

同じ内容の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-3171FAX 046-859-5560E-mail ud-center@lab.ntt.co.jp