タブの始まり
上記リンクをクリックすると、ページ内の該当箇所に移動します
序論
Asynchronous JavaScript and XML (AJAX)は、ページをすべて再ロードすることなく、ウェブページの一部分だけを更新することができる、インターネット上の新技術です。これを使用すれば、パフォーマンスが大きく向上し、多機能なインターネット・アプリケーションの開発が可能です。しかし近年、ウェブ上でJavaScriptおよびAJAXを使用しているページが増え、アクセシビリティに対する懸念が増してきています。本稿では、まずAJAXの概要を説明し、それに対してのアクセシビリティの問題と、最善と思われる実践例をいくつかご紹介します。
AJAXとは何か？ どのように使われているのか？
ここ数年、XML(eXtended Markup Language)を使ったウェブページをHTTP(hypertext transport protocol)上で更新する機能はところどころで見受けられていましたが、最近になってAJAXという語が造り出されるまで、この技術はあまり知られていませんでした。この技術の使用と、GoogleやAmazonをはじめとするインターネット会社による巧妙なネーミングのおかげで、AJAXはウェブには『必須』の技術となりました。その名前から分かるように、AJAXはいくつかのウェブ技術の組合せで成り立っており、XMLに限られた技術ではありません。
鍵は、ウェブサーバーとの非同期通信の技術です。従来のウェブモデルでは、個々のアクションのたびに、ページを丸ごとサーバーから再ロードするのに対し、AJAXでは「舞台裏で」サーバーからページを部分的に更新することができます。結果として、非常に高速で多機能な操作環境を実現できるのです。ウェブ制作者は、HTML/XHTML、CSS(Cascading Style Sheets)、JavaScript、ドキュメント・オブジェクト・モデル(DOM)インタラクション、XMLHttpRequestオブジェクトおよびXMLのようなテクノロジーを組合せ、インタラクティブな（システムと利用者の間で頻繁にやり取りのあるような）ウェブ・アプリケーションを作成することができます。
例えば、一般的な電子メール・アプリケーションでは、ページの左側に電子メール・フォルダのセットがツリー構造のコントロールで表され、右側には選択したフォルダに含まれる文書がリストされます。ユーザーはフォルダを選ぶことができ、ページをすべて再ロードすることなく、そのフォルダのアイテムのリストはページの範囲内で更新されます。あるいは、個々の電子メールをすべて新しいページで開くことなく、ページの下半分でメールの中身をプレビューすることもできます。これに似ています。
何故、AJAXが重要なのか？
AJAXは、単に情報を受信するだけのシステムから、各マシンが連携し合い、動的にデータを結合することを可能にするパラダイム・シフトと言えます。AJAXを使えば、複数のソースからのデータを一枚のインタラクティブなページに集めて表示するなど、高機能なインターネット・アプリケーションを構築することができます。このテクノロジーは、例えば売家またはレストランのリストを地図上に配置するなど、インタラクティブにデータを結合するGoogleマップや、そこから派生した様々なサービスを可能にしています。AJAXは、動的に情報を集め共有し新たな価値を生み出す行同作業(コラボレーション)を可能にする次世代型のWeb環境をもたらすものとして注目されている技術の一つです。写真を共有するFlickrサービスや、プロジェクト管理するBaseCampアプリケーションは、他の多くの人気があるウェブサイトと同様に、AJAXを使っています。
AJAXに関する問題点
まず、AJAXはJavaScriptを使用した技術なので、すべてのAJAXアプリケーションはクライアント側のブラウザーでJavaScriptを使用できることが前提となります。グラフィカル・ブラウザーのほとんどはJavaScriptをサポートしていますので、いくつかのモバイル機器や、テキスト型のブラウザーでは問題となる可能性があります。
この問題に関してのもう一つの懸念は、ワールド・ワイド・ウェブ・コンソーシアム(World Wide Web Consortium - W3C)のWeb Content Accessibility Guidelines（WCAG）1.0が、クライアント側のブラウザーはJavaScriptがオフになった状態でもウェブサイトが使えるようになっていることを義務づけていることです。まだ開発段階のWCAG 2.0は、こうした高機能な「リッチ・インターネット・アプリケーション(Rich Internet Applications - RIA)」の増加に合わせ、それらのサイトがアクセシブルであることを条件として、JavaScriptに対する規制を取り払っています。IBMは、完全にアクセシブルなウェブ・コンポーネントを作成することができる技術を、W3C Protocols and Formatsグループに供与しました。このロードマップから生まれたStates and Adaptable Properties ModuleおよびRole Taxonomy for Accessible Adaptable Applicationsの2つの標準は、これらのリッチ・インターネット・アプリケーション(RIAs)アクセシビリティを実現させるために開発されました。
もう一つの懸念は、AJAXの使用や動的なページ更新は、現代のウェブ使用のパラダイム・シフトであり、ユーザーが必ずしもこの新しい機能に慣れているとは限らないということです。ユーザーはページが更新されたことや、その一部分が変わったことに気づかないかもしれません。たとえば、ショッピング・サイトでユーザーがカートの中のアイテム数のフィールドを変更すると、AJAXを使用して作成されたページなら、その数の変化に応じて総額や税金、送料などが自動的に更新されます。ユーザーは、これら総額や税金などのフィールドの更新を、自分で明示的に更新を要請する操作をしないかぎり、自動的には更新されないと思っているかもしれません。自動的に情報が更新されるとユーザーが分かっていたとしても、データが実際に変わったことに気づかない可能性もあります。また、ユーザーがリンクもしくはボタンを選択し、明示的にページの更新を要請しても、すべてのページが再ロードされないことに戸惑うかもしれません。加えて、その時々に応じてページが更新されることから、AJAXアプリケーションで作成されたページはブックマークできる固有のUniform Resource Identifier(URIs)を持っていない可能性もあります。また、ブラウザーの「戻る」ボタンが予想したとおりに機能しなくて、問題になるかもしれません。
支援技術を使用する人々にとって、これはやっかいな問題です。ページの部分的な更新は、ユーザーが現在操作しているところとは異なる領域で起こる可能性があります。スクリーン・リーダーや画面拡大機能を使う人々にとって、これは非常に大きな問題なのです。たとえユーザーがページの更新を予測していたとしても、その人はページのどこが更新されたのか、またその内容について、見当もつかないこともあるでしょう。更新されたデータに自動的にフォーカスをセットするアプリケーションを使用していると、さらに一部のユーザーを混乱させる可能性もあります。ユーザーがページの最初の部分を読んでいるとき、ページの更新によってフォーカスが最後の方へ勝手に動いてしまうことを想像してください。ユーザーは方向感覚を失ったように思え、懸命にスクロールして、その人が元々読んでいた位置まで戻らなければなりません。フォーカスの位置を変えるようなページの更新がたびたび起こる場合、その人はそのページで用事を済ませることが全くできないかもしれないのです！
AJAXに対する最良の実践例
AJAXの使用が一般化するまでは、AJAXアプリケーションの実行条件についてユーザーに知らせる必要があります。このセクションでは、AJAXを使用したページの、いくつかの最良の実践例をご紹介します。
スクリプトが必須であることを明記する
RIAsはスクリプトを使用するため、アプリケーションに入る最初のページで、スクリプトが必要なことを明示した方がよいでしょう。ページの最初にAJAXの技術を使用していることを明記し、動的なページの更新があることをユーザーに知らせる文を掲載してください。
ユーザー自身が手動で更新を要求できるオプションを提供する
アプリケーションのいくつかは、ユーザーが明示的に要求しなくても、データを自動的に更新します。たとえば、天気、株価および交通情報のサイトです。この種のアプリケーションを構築する場合、自動更新をオフにして、ユーザー自身が手動でページ更新を要求することのできるオプションの提供を検討してください。サーバー上で個人認証を必要とするアプリケーション、あるいはクッキーを用いて、更新に関するユーザーの選択を保存するようにすると良いでしょう。
更新の際に告知を出す
どうしても非同期の自動更新を使用しなければならない場合は、ページが更新される際、ユーザーに告知を出す機能をオプションで選択できるように考慮してください。これは、支援技術を使用しているユーザーに、スクリーンの更新が行われたことを知らせるためのものです。更新が行われる際に告知を出すということは、スクリーン拡大機能を使用しているユーザーに、フォーカスの位置が現在の位置から離れてスクロールされる可能性があることを知らせるためでもあります。また、この告知ウインドウは、変化に気がつきにくい、認知や注意力に問題があるユーザーをも支援します。ただし、ユーザーによっては告知ウインドウ自体に気が散ってしまう可能性があるので、この告知機能は、ユーザー自身が選択できるオプションでなければなりません。
フォーカスの移動を告知する
ページの部分的更新が行われる際、自動的にその部分にフォーカスを移さないでください。とくに、簡単に元の位置に戻すメカニズムがない場合、告知なしにフォーカスの位置を変えると、一部のユーザーは混乱を招く可能性があります。たとえば、あるサイトで、ページの一番下に表示している一連の株価を動的に更新する場合、価格が変動するたびにフォーカスがそこに移動すると、ユーザーはそのページで用事を済ませることができなくなるかもしれません。
色をつけたり、フォント・サイズや文字の太さを変えたりして、一時的に更新した部分を目立たせることができないか検討してください。更新の告知と同様に、色を変えるなどの表示方法は、ユーザーが選択するオプションでなければなりません。スクリーン・リーダーや画面拡大機能を使っているユーザーは、別のウインドウや音での告知、またはフォーカスの移動を好むかもしれませんが、目が見えるユーザーは異なる色で表示したほうが良いと言うかもしれません。背景色を変える場合、中間色を使用し、背景を５から１０秒間だけ変えるようにするのがベストです。しかし、一部のユーザーの気を散らす可能性があるので、あまり劇的に変えたり、点滅させたりすることは避けてください。
しかしながら、場合によっては、フォーカスの移動は適切かもしれません。新しいメールが来ていないか調べるためにユーザーがボタンを押した場合、更新が完了したら、フォーカスをメール・メッセージのリストの方へ動かすのは良いことかもしれません。ユーザーがそのボタンを押したあと、フォーカスがそこに移ると解っていればいいのです。
操作を簡単にする
動的に更新される部分へジャンプするリンクを、ページの中に貼っておいてください。サイトの中で複数の領域が異なる頻度で更新される場合、各々のセクションに素早く移動できる方法を作っておくと良いでしょう。このリンクのセットは、ページの最上部または最下部から簡単にアクセスでき、行きたいセクションに素早く何度でも行けるものでなければなりません。
マークアップの意味を考え、適切に使うことも重要です。支援技術の多くは、見出しを解析して機能する仕組みになっています。ページ内で各々のセクションを識別させる見出しタグを使用すると、支援技術を使用しているユーザーはフォーカスを簡単にセクションからセクションへ移動でき、更新された内容を容易に見つけることができます。
AJAXを使用した検索フォームで、ページをすべて再ロードすることなく検索結果を表示する場合を考えてみましょう。検索結果が返信されたセクションに見出しタグで「検索結果」というラベルをつけるようにすると、支援技術を使用しているユーザーは簡単にフォーカスを検索結果のセクションに持って行くことができます。これはとても良くできたHTMLコーディングの例で、AJAXを使用したウェブページの世界には不可欠です。
エレメントを新たに作成することはせず、既存のエレメントの中の内容を更新する
ページ内に上位階層となる新たなエレメントを作成することはせず、可能な限り既存のエレメントの中の内容を書き換えるようにしてください。どうしても新たなエレメントを付け加えなければならない場合は、現在フォーカスがある場所の後ろに追加して、そのエレメントを文書自体に対する親エレメントというより、既存のエレメントに対しての親エレメントとした方が良いでしょう。
たとえば、新しいコンテンツをページに加える場合は<div>エレメントを用意(create)し、それを親エレメントとして使用します。その<div>の中でコンテンツを更新しても構いませんが、親となる<div>エレメント自体を消去したり新たに作成したりしないでください。
注意：
- 支援技術を使用しているユーザーの多くは、Tabキーを使ってセクションからセクションへと移動します。ページの中で認識可能にした囲み要素にtabindex属性値を明示的に付け加えると、こうしたユーザーがTabキーで操作する際、フォーカスが動く順番に影響を及ぼす可能性があります。
- それぞれの支援技術はページの動的な更新を異なった方法で取り扱いますので、作成したページをいろいろな支援技術でテストすることは、ページのアクセシビリティを確実にする上で大変重要です。
ダイナミック・ウェブアクセシビリティと AJAX
DHTMLアクセシビリティ技術は、デスクトップ上のコンポーネントの機能を制御する豊富なコンポーネント・セットを提供することにより、RIA およびAJAXのアクセシビリティを可能にしています。ページ内の各コンポーネントは、Tabキーを使って行き来できます。また、コンポーネント内では、ユーザーは矢印キーを使用して各々のコントロールを操作できるので、ウェブページ内でTabキーばかりを使用する、解りにくい操作形態を回避することができます。ユーザーは、ページ上で異なるコンポーネントにフォーカスを持って行くことができて、より簡単にインタラクティブにAJAXコンテンツに接することができます。さらにDHTMLには、スクリーン・リーダーが読み上げるため専用の告知文や、画像などを言葉で説明するための文の埋め込みを可能にする、多くの機構も備わっています。これらの告知機能は、明示的な告知用のダイアログ・ボックスを出したり、フォーカスを移動したりすることなく、ユーザーに更新された内容を知らせる機構の一つです。
この技術を使用すれば、ウェブ・アプリケーション開発者は、非常に高いアクセシビリティとユーザビリティを持つ、完全にキーボードのみで操作できるコンポーネントを作成することができます。告知する情報や機能を付け加えると、ブラウザーは支援技術が理解できるフォーマットに変換し、コンポーネントの機能や状態に関する詳細な情報をユーザーに提供できます。Yahoo!およびAOLは、この新しい技術を実装しており、支援技術の促進を願うコミュニティー全体で、この技術の推進に一役買っています。
ダイナミック・ウェブアクセシビリティ技術が、いかにAJAXに対するアクセシビリティを可能にするかの良い例が、ツリー構造のコントロールがページの左側にあり、コンテンツとコンテンツ・エリアがページの右側にあるドキュメンテーション・サイトです。ユーザーは矢印キーを使ってツリー構造のコントロールを操作でき、フォーカスがあるノードのレベルや詳細情報、またそのノードが開いているか閉じているかなど、各ノードの情報をスクリーン・リーダーから取得できます。ノードが選択された場合、ページがすべて再ロードされることなく、フォーカスもツリー構造のコントロール内に残ったまま、ページの右側にあるコンテンツ・エリアのみが更新されます。ユーザーは、Tabキーでフォーカスをツリー構造のコントロールからコンテンツ・エリアに移動でき、データを操作することができます。別のコンテンツに移るにはShift+Tabで以前のツリー構造のコントロール中のノードにフォーカスを移動させます。そして、すでに見たノードを通ったり、ページを再ロードしたりすることなく、ユーザーはツリー構造のコントロールの中を自由に行き来することができるのです。
ダイナミック・ウェブアクセシビリティは、IBM、W3CおよびMozilla開発コミュニティの間の協同で開発された技術です。W3Cがこの新しい標準を開発し、IBMはFirefox 1.5で必要な部分を実装して、支援技術を手がけるベンダーがダイナミック・ウェブアクセシビリティをサポートするのを支援するために、専門知識の提供もおこなっています。ダイナミック・アクセシブル・ウェブ・コンテンツ・ロードマップ(Dynamic Accessible Web Content Roadmap)では、告知する情報や機能をDHTMLアプリケーションに組み込む方法を解説しています。
要約
AJAXは、ウェブの世界をますます広げ、高機能なインターネット・アプリケーションの作成を可能にする、画期的な新技術です。ページの部分的な更新は、パフォーマンスを向上し、より複雑なユーザー・インタフェースと対話型の操作性をウェブ上で実現します。とくにDHTML Accessibility Roadmap技術の実装など、AJAX対応アプリケーションを確実にアクセシブルにするために、現在踏むことができるいくつかの基本的なステップがあります。