第1回 FF3、IE8が対応！これがWAI-ARIA

Ajaxがもたらした恩恵

　2005年にAjaxというコンセプトや実装技術が紹介され、急速に普及しはじめてから、Webは格段に使いやすくなりました。

　画面遷移をせずにサーバーから新しいコンテンツを取得し、画面の一部のみを更新するこの技術は、パフォーマンスの向上を実現し、この技術をきっかけにJavaScriptは非常によく使われるようになりました。

　prototype.js（http://www.prototypejs.org）やjQuery（http://jquery.com）といったJavaScriptライブラリが登場し、ブラウザ間のJavaScriptの実装の差異を気にすることなく、サーバーと通信をしたり、画面を動的に変更することが可能になりました。

　また、Dojo Toolkit（http://dojotoolkit.org/）やExt JS（http://extjs.co.jp）は、画面を動的に変更する技術をさらに進化させ、デスクトップアプリケーションではよく見られる便利なスライダーや、ツリーナビゲーション、アコーディオンといった新しいユーザーインターフェース（JavaScriptウィジェット）をWeb上に実現しています。

　今後は、デスクトップアプリケーションだけでなく、Googleが提供するGoogle Reader（http://www.google.com/reader）や、Google Spreadsheets（http://spreadsheets.google.com/ccc?new&hl=ja）のような、Web上でアプリケーションサービスを提供する形態（SaaS）の利用がより進むと考えます。また、企業内でも業務システムなどのWeb化が進んでいくでしょう。

AjaxをアクセシブルにするWAI-ARIAとは？

　Ajaxが非常によい使い勝手を提供する一方で、スクリーンリーダーを使っているユーザーや、マウスを使用できないユーザーにとっては、Ajaxによる表現を使ったWebサイトが利用できないという問題が生じています。

　具体的には次のような3つの問題が生じてしまいます。

　1つ目は、読み上げブラウザは、動的に切り替わったコンテンツを検知して読み上げることができないことです。

　2つ目は、Webブラウザはリンクとフォームしか、キーボードを使ってフォーカスを当てることができないため、ツリーナビゲーションなどのインターフェースは、通常マウスを使わなければ操作することができないことです。

　3つ目は、仮にフォーカスを当てることができても、読み上げブラウザはその部品がツリーナビゲーションというインターフェース部品であることを認識し、読み上げることができません。このため、目の不自由なユーザーなどの操作を支援することができません。

　WAI-ARIA（http://www.w3.org/WAI/PF/aria/）（ウェイ・アリア：Web Accessibility Initiative-Accessible Rich Internet Applicationsの略）は、W3C（http://www.w3.org/）が策定を進めているもので、HTMLマークアップを拡張することで、これらの問題を解消する技術仕様です。

　例えば、<span>タグで作成した自作checkboxは図1の右の「WAI-ARIAサンプルコード」のとおりになります。

　「role="checkbox"」とすることで、スクリーンリーダーは<span>タグをチェックボックスと読み上げます。「aria-checked="true"」とすることで、スクリーンリーダーは、そのチェックボックスが「チェックあり」と読み上げます。「tabindex="0" 」とすることで、この<span>タグには、TABキーを押していけばフォーカスがあたるようになります。

　次ページでは、この例のスクリーンリーダーによる読み上げのデモを見てみましょう。