AJAXの使用が一般化するまでは、AJAXアプリケーションの実行条件についてユーザーに知らせる必要があります。このセクションでは、AJAXを使用したページの、いくつかの最良の実践例をご紹介します。
スクリプトが必須であることを明記する
RIAsはスクリプトを使用するため、アプリケーションに入る最初のページで、スクリプトが必要なことを明示した方がよいでしょう。ページの最初にAJAXの技術を使用していることを明記し、動的なページの更新があることをユーザーに知らせる文を掲載してください。
ユーザー自身が手動で更新を要求できるオプションを提供する
アプリケーションのいくつかは、ユーザーが明示的に要求しなくても、データを自動的に更新します。たとえば、天気、株価および交通情報のサイトです。この種のアプリケーションを構築する場合、自動更新をオフにして、ユーザー自身が手動でページ更新を要求することのできるオプションの提供を検討してください。サーバー上で個人認証を必要とするアプリケーション、あるいはクッキーを用いて、更新に関するユーザーの選択を保存するようにすると良いでしょう。
更新の際に告知を出す
どうしても非同期の自動更新を使用しなければならない場合は、ページが更新される際、ユーザーに告知を出す機能をオプションで選択できるように考慮してください。これは、支援技術を使用しているユーザーに、スクリーンの更新が行われたことを知らせるためのものです。更新が行われる際に告知を出すということは、スクリーン拡大機能を使用しているユーザーに、フォーカスの位置が現在の位置から離れてスクロールされる可能性があることを知らせるためでもあります。また、この告知ウインドウは、変化に気がつきにくい、認知や注意力に問題があるユーザーをも支援します。ただし、ユーザーによっては告知ウインドウ自体に気が散ってしまう可能性があるので、この告知機能は、ユーザー自身が選択できるオプションでなければなりません。
フォーカスの移動を告知する
ページの部分的更新が行われる際、自動的にその部分にフォーカスを移さないでください。とくに、簡単に元の位置に戻すメカニズムがない場合、告知なしにフォーカスの位置を変えると、一部のユーザーは混乱を招く可能性があります。たとえば、あるサイトで、ページの一番下に表示している一連の株価を動的に更新する場合、価格が変動するたびにフォーカスがそこに移動すると、ユーザーはそのページで用事を済ませることができなくなるかもしれません。
色をつけたり、フォント・サイズや文字の太さを変えたりして、一時的に更新した部分を目立たせることができないか検討してください。更新の告知と同様に、色を変えるなどの表示方法は、ユーザーが選択するオプションでなければなりません。スクリーン・リーダーや画面拡大機能を使っているユーザーは、別のウインドウや音での告知、またはフォーカスの移動を好むかもしれませんが、目が見えるユーザーは異なる色で表示したほうが良いと言うかもしれません。背景色を変える場合、中間色を使用し、背景を５から１０秒間だけ変えるようにするのがベストです。しかし、一部のユーザーの気を散らす可能性があるので、あまり劇的に変えたり、点滅させたりすることは避けてください。
しかしながら、場合によっては、フォーカスの移動は適切かもしれません。新しいメールが来ていないか調べるためにユーザーがボタンを押した場合、更新が完了したら、フォーカスをメール・メッセージのリストの方へ動かすのは良いことかもしれません。ユーザーがそのボタンを押したあと、フォーカスがそこに移ると解っていればいいのです。
操作を簡単にする
動的に更新される部分へジャンプするリンクを、ページの中に貼っておいてください。サイトの中で複数の領域が異なる頻度で更新される場合、各々のセクションに素早く移動できる方法を作っておくと良いでしょう。このリンクのセットは、ページの最上部または最下部から簡単にアクセスでき、行きたいセクションに素早く何度でも行けるものでなければなりません。
マークアップの意味を考え、適切に使うことも重要です。支援技術の多くは、見出しを解析して機能する仕組みになっています。ページ内で各々のセクションを識別させる見出しタグを使用すると、支援技術を使用しているユーザーはフォーカスを簡単にセクションからセクションへ移動でき、更新された内容を容易に見つけることができます。
AJAXを使用した検索フォームで、ページをすべて再ロードすることなく検索結果を表示する場合を考えてみましょう。検索結果が返信されたセクションに見出しタグで「検索結果」というラベルをつけるようにすると、支援技術を使用しているユーザーは簡単にフォーカスを検索結果のセクションに持って行くことができます。これはとても良くできたHTMLコーディングの例で、AJAXを使用したウェブページの世界には不可欠です。
エレメントを新たに作成することはせず、既存のエレメントの中の内容を更新する
ページ内に上位階層となる新たなエレメントを作成することはせず、可能な限り既存のエレメントの中の内容を書き換えるようにしてください。どうしても新たなエレメントを付け加えなければならない場合は、現在フォーカスがある場所の後ろに追加して、そのエレメントを文書自体に対する親エレメントというより、既存のエレメントに対しての親エレメントとした方が良いでしょう。
たとえば、新しいコンテンツをページに加える場合は<div>エレメントを用意(create)し、それを親エレメントとして使用します。その<div>の中でコンテンツを更新しても構いませんが、親となる<div>エレメント自体を消去したり新たに作成したりしないでください。
注意：
- 支援技術を使用しているユーザーの多くは、Tabキーを使ってセクションからセクションへと移動します。ページの中で認識可能にした囲み要素にtabindex属性値を明示的に付け加えると、こうしたユーザーがTabキーで操作する際、フォーカスが動く順番に影響を及ぼす可能性があります。
- それぞれの支援技術はページの動的な更新を異なった方法で取り扱いますので、作成したページをいろいろな支援技術でテストすることは、ページのアクセシビリティを確実にする上で大変重要です。
|
