FF3、IE8が対応!これがWAI-ARIA

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

志田 裕樹

2008年9月4日 20:00

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マークアップを拡張することで、これらの問題を解消する技術仕様です。

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

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

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

人気記事トップ10

人気記事ランキングをもっと見る

企画広告も役立つ情報バッチリ! Sponsored

ClickHouse Cloudが実現した広告運用SaaS「ATOM」のデータ基盤革新、パフォーマンスを向上しながら、運用負荷とコストを削減 11月11日 6:20 AIで開発が加速する時代、品質保証はどう変わる? Tricentisが示すAIエージェント活用の実像 11月9日 6:45 悪用までの猶予が「1分」に迫るフロンティアAI時代に開発と本番を貫く脆弱性管理が必要 10月29日 8:30 欧州CRA対応とSBOM運用。AI生成コードのOSS混入問題の対策とは ――スニペット単位で検出する「FossID」「Insignary Clarity」によるSBOM運用 9月16日 6:40 PostgreSQLからTiDBへ、稼働中SaaSで進める段階的DB移行の実践と再設計への展望 9月7日 6:30 機能安全開発におけるGoogleTestの活用を支援!「Parasoft C/C++test CT」で実現する効率化&AI連携 4月14日 6:30 【CNDW2025】Grafanaが明かす「オブザーバビリティの哲学」ー最小限の労力で実用的なインサイトを得るには 1月23日 6:30 【CNDW2025】プロダクト急増に備える基盤刷新 ーウェルスナビがECSからEKSへの移行で得た知見とは 1月15日 6:30 【CNDW2025】250環境を5人で運用、構築時間は30分に ーKINTOテクノロジーズが語るインフラ基盤組織の作り方 2025年12月18日 6:30 新たな自動化で熱視線! AIエージェントの「推論能力」を支える2つのコンポーネントとは? 2025年11月28日 6:30