裕樹TweetAjaxがもたらした恩恵2005年にAjaxというコンセプトや実装技術が紹介され、急速に普及しはじめてから、Webは格段に使いやすくなりました。画面遷移をせずにサーバーから新しいコンテンツを取得し、画面の一部のみを更新するこの技術は、パフォーマンスの向上を実現し、この技術をきっかけにJavaScriptは非常によく使われるようになりました。prototype.js(http://www.prototypejs.org)やjQuery(http://jquery.com)といったJavaScriptライブラリが登場し、ブラウザ間のJavaScriptの実装の差異を気にすることなく、サーバーと通信をしたり、画面を動的に変更することが可能になりました。JS(http://extjs.co.jp)は、画面を動的に変更する技術をさらに進化させ、デスクトップアプリケーションではよく見られる便利なスライダーや、ツリーナビゲーション、アコーディオンといった新しいユーザーインターフェース(JavaScriptウィジェット)をWeb上に実現しています。Spreadsheets(http://spreadsheets.google.com/ccc?new&hl=ja)のような、Web上でアプリケーションサービスを提供する形態(SaaS)の利用がより進むと考えます。企業内でも業務システムなどのWeb化が進んでいくでしょう。AjaxをアクセシブルにするWAI-ARIAとは?Ajaxが非常によい使い勝手を提供する一方で、スクリーンリーダーを使っているユーザーや、マウスを使用できないユーザーにとっては、Ajaxによる表現を使ったWebサイトが利用できないという問題が生じています。具体的には次のような3つの問題が生じてしまいます。1つ目は、読み上げブラウザは、動的に切り替わったコンテンツを検知して読み上げることができないことです。2つ目は、Webブラウザはリンクとフォームしか、キーボードを使ってフォーカスを当てることができないため、ツリーナビゲーションなどのインターフェースは、通常マウスを使わなければ操作することができないことです。3つ目は、仮にフォーカスを当てることができても、読み上げブラウザはその部品がツリーナビゲーションというインターフェース部品であることを認識し、読み上げることができません。このため、目の不自由なユーザーなどの操作を支援することができません。Applicationsの略)は、W3C(http://www.w3.org/)が策定を進めているもので、HTMLマークアップを拡張することで、これらの問題を解消する技術仕様です。タグで作成した自作checkboxは図1の右の「WAI-ARIAサンプルコード」のとおりになります。「role="checkbox"」とすることで、スクリーンリーダーはタグをチェックボックスと読み上げます。「aria-checked="true"」とすることで、スクリーンリーダーは、そのチェックボックスが「チェックあり」と読み上げます。」とすることで、このタグには、TABキーを押していけばフォーカスがあたるようになります。次ページでは、この例のスクリーンリーダーによる読み上げのデモを見てみましょう。2004年1月より株式会社アークウェブの創業スタッフとして勤務。SEとしてさまざまなWebシステムの構築に従事。Railsなどの記事執筆も行っている。ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。VeloCloudが選ばれる理由SD-WANとはなにか。Linuxエンジニア育成への思いF5とNGINXの組み合わせで、サービス公開をよりセキュアに。ITがお届けするポッドキャストです。