このページの先頭です
ここから本文です 実践ノウハウ

特集記事:Ajaxのアクセシビリティ

イントロダクション:Ajaxとは?

Ajaxのアクセシビリティを語る前に、まずAjaxとは何か、そしてAjaxがWebアプリケーションにどのような進化をもたらしているかを説明しておこう。

Ajaxという用語は、Asynchronous JavaScript and XML の略で、JavaScriptとXMLを組み合わせて用いる技術のことを指す。このAjaxを使うと、従来ならばWebページ全体をリフレッシュしなければならなかったインタラクションが、変化させたい部分だけを読み込むことが可能になり、操作性が軽快になるということで注目を集めている。たとえば、キーワードを入力して検索するとき、これまではキーワードを入力して検索ボタンを押すと、ページ全体がリフレッシュされて、検索結果ページが表示される、というのが当たり前だった。これがAjaxを使うと、検索ボタンを押すとページ自体はそのままで、すぐ下に検索結果が出てくるといったことが可能になる。JavaScriptとXML、そしてXMLHttpRequest(HTTP通信を行うためのJavaScript組み込みクラス)による非同期通信を利用したAjaxにより、ユーザーはクリックするたびに画面遷移のために待たされることがなくなり、よりスピーディにWebページやWebアプリケーションを利用することができるようになるわけだ。

つまり、従来のWebインタラクションでは、ユーザー(クライアント)からのリクエストに応じてサーバは新しいページを提供していたが、Ajaxではページ全体ではなくその必要な部分だけを提供することができる。つまり、従来はページ全体がリフレッシュされて新しいページが読み込まれていたが、Ajaxではページ自体はそのままの状態でページの一部だけをリフレッシュすることが可能なのだ。

この技術は、米国のadaptive path社のJesse James Garrett氏がエッセイ『Ajax: A New Approach to Web Applications』で"Ajax"という名前を付け、GoogleがGoogleマップやGoogleサジェストにこのAjaxを利用したことで、一躍有名になった。JavaScriptもXMLもそれ自体は新しい技術ではなく、Webブラウザのみで動作する既存の技術の組合せなのだが、これまでは当たり前であった画面遷移が必要なくなり、ユーザビリティが向上するということで最近ではWebアプリケーションで採用され始めている。Ajaxに関する詳細は、以下のサイトなども参考にするとよい。

Ajaxが抱えるアクセシビリティ上の問題

しかし、同時に世界中のアクセシビリティ専門家達の間では、このAjaxが引き起こしうる新たなアクセシビリティ上の問題を懸念する声が上がり始めている。Ajaxによるアクセシビリティの問題としては、主に以下のようなことが挙げられる。

  • JavaScriptをオフにした状態では使えない
  • 音声ブラウザやスクリーンリーダーで操作できない
  • キーボードだけで操作できない

まず、1つ目に挙げた "JavaScriptをオフにした状態では使えない" についてだが、これには色々な議論があるところだろう。数年前ならば、"JavaScriptをサポートしていないブラウザもあるから代替コンテンツを提供しなくてはならない"、といった論調が強かった。しかし最近では、ブラウザ(音声ブラウザなどを含む)のサポート状況が向上してきたことにより、"自分の意思でJavascriptをオフにしている状態でブラウザを使用しているユーザーをどう捉えるか"、というのが焦点になりつつある。ブラウザのデフォルトの設定では使えるのに、それをわざわざ使えないようにしているのだから、そういうユーザーにはJavaScriptを使用していることを伝えればよくて、オフにしていても使える同等な機能まで提供する必要はないだろう、という意見もある。もちろん、本来は JavaScript のオン/オフに関係なく、同じ情報が得られて同じ機能が利用できるようにすべきであることは言うまでもない。JavaScript がオフの状態でもユーザーは同じタスクを完了することができ、JavaScript がオンだとよりスムーズにタスクを完了できるような形が理想ではある。

最も深刻なのは音声ブラウザやスクリーンリーダー

それよりも、最も深刻なのは2つ目に挙げた、"音声ブラウザやスクリーンリーダーで操作できない" という問題である。3つ目の "キーボードだけで操作できない" というのは、中にはそういうAjaxもあるというだけで、Ajax全てが当てはまるわけではない。

さて、なぜ音声ブラウザやスクリーンリーダーで操作できないのだろうか? 冒頭でも説明したように、Ajaxというのは従来の画面遷移を必要としないインタラクションを実現する技術である。つまり、画面自体はそのままの状態で、その一部が変化するわけだ。これが音声ブラウザやスクリーンリーダーにとっては、非常に厄介な問題を引き起こすのである。音声ブラウザやスクリーンリーダーを実際に使ったことのある人なら分かるかもしれないが、音声読み上げソフトは、Webページが読み込まれると、そのページの先頭から最後まで(X)HTMLのソースコードの順序で読み上げる。画面遷移で新しいページが読み込まれると、またそのページの先頭から読み上げ始める。ところが、Ajaxを用いたインタラクションでは、この画面遷移がなくなるため、ユーザーがリンクやボタンを押したとしても、当然ながら新しいページが読み込まれるということはない。そして、音声ブラウザやスクリーンリーダーには、画面の一部が変更されたことを知る術がないのである。

こうなると、音声ブラウザやスクリーンリーダーのユーザーはもうお手上げである。もちろん、キー操作によりページ内をくまなく読み上げさせることはできるので、リンクやボタンを押した後で変更された画面の一部分を探し回ることができないわけではない。しかし、それをユーザーに要求するのはあまりにも現実的ではなさすぎる。

問題点を指摘するアクセシビリティの専門家達

このあたりの問題を指摘するとともに、こういうふうにAjaxを使えば、音声ブラウザやスクリーンリーダーでも問題なく同じように使えるというサンプルを試作して公開するアクセシビリティの専門家が現れてきた。

この特集記事では、まずインフォアクシアと同じ WAT-C(Web Accessibility Tools Consortium)のメンバーであり、W3C/WAIのWCAGワーキンググループでも一緒に作業をしている、イギリスのGez Lemon氏が自身のサイト『Juicy Studio』で公開した「Making Ajax Work with Screen Readers」という記事の日本語訳からお届けしていこう。

[次回へ続く]

このページの先頭へ▲