第8回 読み上げ環境専用の情報は本当に必要? | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて

第8回 音声読み上げ環境専用の情報は本当に必要?


アクセシビリティに配慮したWebサイトには多くの場合、画面上に表示されない音声読み上げ専用のさまざまな情報が用意されています。「ナビゲーションスキップ」のようなページ内リンクは、その代表例です。

一般には“アクセシビリティに配慮したもの”として認識されているこれらの情報ですが、今回はナビゲーションスキップを通して、こうした音声読み上げ環境専用の情報が本当に必要なのか?を考えてみたいと思います。

(解説:辻 勝利)

著者近影
[プロフィール]
つじ・かつとし●株式会社ミツエーリンクス アクセシビリティ・エンジニア。先天性の全盲で、インターネットをライフラインとして日常的に使用する。2001年よりWebアクセシビリティに関わる仕事に従事し、数多くの企業や自治体のWebサイトの音声読み上げ環境での検証を行う。現在は、アクセシビリティBlogでの情報発信や講演を通して、Webアクセシビリティの更なる普及・啓蒙活動を行っている。


ナビゲーションスキップとは?


Webサイトの各ページに設定されているメニュー項目(ナビゲーション)。スクリーン・リーダーや音声ブラウザを使用した際、こうしたナビゲーションはページを遷移する度に読み上げられます。Webアクセシビリティに配慮したサイトでは、利用者が同じ音声を何度も聞くことを避けるため、メニュー項目をスキップしページ内の本文から内容を読むことができるページ内リンクが設定されています。これを「ナビゲーションスキップ」といいます。

こうしたページ内リンクの多くは音声読み上げ専用に用意されており、画面上には表示されないようになっています。

オフにできないカーナビのガイダンスのようなもの


Webアクセシビリティに関するJIS規格、JIS X 8341-3の項目5.3Hでは、「共通に使われるナビゲーションなどのためのハイパリンク及びメニューは、読み飛ばせるようにすることが望ましい。」とされています。

実際、現在あるWebアクセシビリティ対応サイトの多くは、音声読み上げ環境利用者への配慮として、ナビゲーションスキップをはじめとする情報を提供しています。なかには、メニューや本文中の項目の区切りに「ここから本文です」、「ここからナビゲーションです」といったメッセージが付加されているケースもあります。

ですが、本当にこうした情報は、音声ブラウザやスクリーン・リーダーの利用者にとって有益なものなのでしょうか?

ナビゲーションスキップが有効な場面がある反面、筆者にはこの機能が“ガイダンスをオフにできないカーナビゲーション”のように、わずらわしく感じられるときがあります。

カーナビゲーション(以下、カーナビ)は初めての場所に向かう際は非常に有効な情報源です。Webサイト内に設定された音声読み上げ専用の情報も、初めてそのサイトを訪れた利用者や、サイトの閲覧に不慣れな支援技術の利用者にとっては同じように便利な機能でしょう。

ですが、毎日使う通勤路などすでに目的地への経路がわかっている場合、カーナビのガイダンスはどう設定されるでしょうか? おそらく、慣れた道を走る場合はオフにすると思います。一方、音声読み上げのために専用に用意された項目は、使い慣れたサイトであっても、毎回アクセスするたびに読み上げられてしまうのです。

次の2つの図と合わせて、音声読み上げ専用の情報が設定されたそれぞれのページの読み上げ音声をお聞きください。

音声読み上げ専用の情報を設定しているページ例。左がCSS有効時、右がCSS無効時の表示
【図1】CSS有効時には表示されないが、音声読み上げ環境用の情報としてナビゲーションスキップが設定されている。ナビゲーションスキップ部分のリンクを利用すると、該当箇所に移動することができるが……


左に示したのはWebサイトのトップページ。右はトップページからの遷移先となる会社案内ページ。それぞれページの下にCSS無効時の表示状態を示した
【図2】トップページから会社案内のページへ移動すると……利用者はナビゲーションスキップ部分の読み上げ音声を繰り返し聞くことになる。Webサイトを再び訪れた際も同様である


初めてサイトを訪れた際や1ページだけを聞いた場合は、それほどわずらわしくは感じられないかもしれません。しかし、Webサイト全体にこの音声読み上げのための情報が設定されているため、どのページにアクセスしても毎回このようなメッセージを聞かなければならないのです。皮肉なことに、ナビゲーションスキップ部分のリンク読み上げ自体はスキップすることができません。

次に、読み上げ専用の情報が設定されていないページの読み上げ音声を聞いてください。

音声読み上げ環境用のページ内リンクを設けず、見出しを適切にマークアップしているページ例。左がCSS有効時、右がCSS無効時の表示画面
【図3】図1のような音声読み上げ環境専用の情報は設定されていないが、見出しが適切にマークアップされており、情報にアクセスしやすくなっている。


ページ内に設定された見出しやリストなどの文書構造を利用して、情報が上記の音声と比較して完結に表現されていることがおわかりいただけるかと思います。

Webサイトの情報をよりわかりやすく表現するということは大切なことですが、特別な機能を実装をしなくとも見出しなどの文書構造を示す要素を適切にしようすれば、誰にとってもアクセスしやすい情報を提供することは可能です。ご自身が現在作成中のサイトやすでに公開されたサイトの中に、今回紹介したようなガイダンスをオフにできないカーナビのような実装がないか、一度確認してみてください。


次回につづく
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在