アクセシビリティに対応した AJAX サイトの設計

AJAX を使用すると、強力なウェブ アプリケーションとして動作する動的なページを作成でき、サイトの利便性の向上に役立ちます。ただし、AJAX を使用したサイトでは、Flash と同じように、検索エンジンによるインデックスの登録が困難になる場合があり、導入には注意が必要です。AJAX に関する検索エンジンの主要な問題は 2 つあります。検索エンジンのロボットがコンテンツを読み取れるようにすることと、ナビゲーションを参照して追跡できるようにすることです。

Googlebot は、HTML リンクの構造を理解することには長けていますが、ナビゲーションに JavaScript を使用しているサイトの検出は苦手です。Google では JavaScript の読解能力の強化に取り組んでいますが、Google や他の検索エンジンによるクロールが可能な、コンテンツへの HTML リンクを記載したサイトを作成することをおすすめします。

アクセシビリティを考慮した設計

Google では、ページを作成する際、検索エンジンだけでなくユーザーの利便性も考慮するよう推奨しています。AJAX サイトを設計する際は、JavaScript 対応のブラウザを使用していない(スクリーン リーダーや携帯端末などを使用している)ユーザーのニーズを考慮してください。サイトのアクセシビリティをテストするには、JavaScript を無効にしたブラウザでプレビューするか、Lynx などのテキスト ブラウザで表示するのが簡単です。テキストのみでサイトを表示すると、画像や Flash に埋め込まれたテキストなどの、Googlebot によるアクセスが困難な他のコンテンツも特定できます。

iFrame を使用しないようにするか、iFrame のコンテンツへのリンクを個別に設定する

iFrame で表示されるコンテンツはインデックスに登録されず、Google の検索結果に表示されない場合があります。コンテンツの表示には iFrame を使用しないことをおすすめします。iFrame を使用する場合は、表示するコンテンツへのテキスト ベースのリンクを設定して、Googlebot でコンテンツをクロールしてインデックスに登録できるようにします。

拡張を前提とした作成

サイトを一から作成する場合は、HTML のみを使用してサイトの構造とナビゲーションを構築することをおすすめします。その後、サイトのページ、リンク、コンテンツを配置し、AJAX を使用して外観やインターフェースをデザインします。これにより、Googlebot は HTML を参照でき、ユーザーは最新のブラウザを使用して AJAX の機能を活用できます。

AJAX 機能で使用する JavaScript の必要なリンクを作成する場合もあります。ウェブ開発者の Jeremy Keith 氏は、AJAX と静的リンクを共存させる方法として、この技術を「Hijax」と名付けました。

リンクの作成時に、静的なリンクの表示と JavaScript 関数の呼び出しが可能となるようフォーマットします。これにより、JavaScript ユーザーは AJAX 機能を使用でき、JavaScript を使用しないユーザーはスクリプトを無視してリンクをクリックできます。たとえば次のようになります:

<a href="ajax.htm?foo=32" onClick="navigate('ajax.html#foo=32');
 return false">foo 32</a>

静的なリンクの URL には、AJAX コードで使用されるフラグメント(#foo=32)の代わりにパラメータ(?foo=32)を使用します。検索エンジンでは、URL のパラメータは理解されますが、フラグメントは無視されることが多いため、これは重要です。静的なリンクの表示により、ユーザーと検索エンジンは共有または参照するコンテンツに正確にアクセスすることができます。

Google では常にクロール機能の改善に取り組んでいますが、HTML リンクを使用することは、Google や他の検索エンジン、携帯端末、ユーザーがサイトの構造を的確に理解するうえで有効な方法です。

ガイドラインの遵守

ここに記載しているヒント以外にも、ウェブマスター向けガイドライン(品質に関するガイドライン)で Google とユーザーにとって最適なサイトを作成する方法を確認することをおすすめします。ガイドラインでは、不正な JavaScript リダイレクトなどの回避すべき事例についても説明しています。遵守すべき原則は、ユーザーに応じて異なる操作を提供することは可能ですが、そのコンテンツは同じでなければならないということです。たとえば、ABC ハムスター ショップのページを作成する場合、ページ上部に「ABC ハムスター ショップ」のタイトルを掲載して、その下に AJAX を使用したハムスターのスライドショーを表示します。ここで、JavaScript を無効にしたユーザーに、次のような追加テキストを表示することは望ましくありません:

ABC ハムスター ショップでは、高価なハムスター、お手頃なハムスター、 無料のハムスター、ペット用、繁殖用、ハムスター養殖者向け、踊るハムスター、齧歯類、 ハム太郎、血統書付きハムスター、ペット用玩具、ダンス レッスン、 かわいいしぐさ、ハムスターの芸、ペットフード、ハムスターの家、ハムスターのホテル、ハムスターの誕生日プレゼントなど、各種商品やサービスを取り揃えています。

より望ましいのは、JavaScript が有効かどうかに関係なく同じテキストが表示されることであり、最も良いのは JavaScript を使用しないユーザーに HTML 形式のスライドショーを表示することです。詳しくは隠しテキストについてのページをご覧ください。

この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。