第4回 Webアクセシビリティの現状 | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて

第4回 Webアクセシビリティの現状


今回は日本のWebアクセシビリティの現状がどのようなものかについて、Webサイトを利用するユーザーの側から感じることを中心に述べていきます。

(解説:辻 勝利)


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


アクセシビリティ対応が目的?


前回もお伝えしたように、Webアクセシビリティに関連するガイドラインの登場により、アクセシビリティ対応を謳ったWebサイトは近年増加しています。

自治体や企業サイトの中には、「Webアクセシビリティに対する考え方」というページを設け、そのWebサイトがどれぐらいアクセシビリティに配慮しているかをアピールしているところも少なくありません。

この連載の中で、筆者はしばしば「Webアクセシビリティは特別な配慮ではない」と書いてきました。そう考えたとき、この「Webアクセシビリティに対する考え方」のような記述は、“特別な配慮”であるといえます。

例えば、あるWebサイトが複数の異なるブラウザでの表示に対応している場合を思い浮かべてください。一般的に利用されているブラウザAのほかに、利用者が少ないブラウザBでページが閲覧できるよう対応したとしても、それはごく当たり前のことです。それを「ブラウザB対応に関する考え方」として表明するようなことは、ほとんどないでしょう。

同じように「Webアクセシビリティに対する考え方」を捉えた場合、“特別な配慮”と述べた意味がわかっていただけると思います。

こうしたサイトを閲覧していて感じるのは、多くのアクセシビリティ対応を謳ったWebサイトはアクセシビリティ対応が「目的」になってしまっている、という現状です。

忘れてはならないのは、Webサイトを訪れる利用者が欲しているのは、“特別な配慮”ではなくて、「Webサイトにある情報」だということ。Webアクセシビリティは対応すること自体が目的なのではなく、多くの利用者に情報をより効率的に伝えるための「方法」のひとつにすぎません。

完全ではないWebアクセシビリティ対応の実例


次に、現状の「Webアクセシビリティ対応サイト」に多く見受けられる、改善の余地があるアクセシビリティの例を解説します。

音声ブラウザやスクリーン・リーダーの利用者のために、ページ内リンクを設定しているサイトがあります。ページにアクセスした際、どのページにも共通のナビゲーションなどをスキップして、本文など目的の部分から読めるように設定されるケースが多いようです。

具体的な使用例は後述しますが、こうしたページ内リンクがすべての読み上げ環境利用者にとって便利だとは限りません。その理由には以下のようなことが挙げられます。

  • ページ内リンクはしばしば複数個設定されているため、ページ閲覧中に何度も同じ文言を聞かされてしまう。
  • ページ内リンクが設定されているにも関わらず、そのリンクを使っても移動できないことがある。

画面読み上げ環境に配慮したページの例。フォントサイズの変更によって見出しを表現している。左側がCSS有効時。右側はCSS無効時で、通常は画面上に表示されないページ内リンクを表示したもの
【図1】アクセシビリティに配慮している点は評価されるが、見出しなどの文書構造が適切に設定されていないという問題点が

文書構造を適切に記述しているが、特にアクセシビリティへの配慮を行っていない例。左側がCSS有効時、右側がCSS無効時
【図2】文書が構造化されているため、見出しなどへ移動することで目的の情報に効率的にアクセスできる

図1は、ページ内リンクを利用することで、音声読み上げ環境の利用者は本文中の指定した位置から内容を読むことができます。この方法は見出しやリストの情報にアクセスできない一部のスクリーン・リーダー利用者には有効な方法ですが、利用者によってはページ内リンクの読上げが冗長に感じるケースもあります。

また、積極的にページ内の特定の情報にアクセスしたいスクリーン・リーダーや音声ブラウザ利用者にとっては、見出しなどの文書構造が適切に設定されていないため、効率よく情報にアクセスできないという問題があります。

図2の例は、音声ブラウザやスクリーン・リーダーの利用者自身が、文書構造への移動コマンドを使用することで、ページ内の見出しなどへ必要に応じて移動して内容を読むことができます。しかしながら、一部のスクリーン・リーダーにはページ内の見出しなどへ移動する機能がないため、ページ内の目的の情報にたどり着くまでやや時間がかかる可能性があります。

下記の音声ファイルは、図に示した2つの例をそれぞれ、スクリーン・リーダーで読み上げたものです。ページ内リンクや見出し、リスト部分など、読み上げられ方の違いを実際に体験してみてください。


今回はWebアクセシビリティの現状を、よく利用されているページ内リンクの例と共に紹介してきました。Web制作に携わる方には、特定の支援技術に対応したWebサイトではなく、より多くの利用者が効率よく情報にアクセスできるサイトを作っていただきたいと思います。

次回は理想的なWebの形を考えていきたいと思います。


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

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在