TOPシステム開発【見やすさと使いやすさ】WAI-ARIAによるアクセシブルRIA> 第1回:FF3、IE8が対応!これがWAI-ARIA (1/3)




【見やすさと使いやすさ】WAI-ARIAによるアクセシブルRIA

【見やすさと使いやすさ】
WAI-ARIAによるアクセシブルRIA

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

著者:株式会社アークウェブ 志田 裕樹

公開日:2008/9/4(木)

はてなブックマークの登録数

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

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

 prototype.jsjQueryといったJavaScriptライブラリが登場し、ブラウザ間のJavaScriptの実装の差異を気にすることなく、サーバーと通信をしたり、画面を動的に変更することが可能になりました。

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

 今後は、デスクトップアプリケーションだけでなく、Googleが提供するGoogle Readerや、Google Spreadsheetsのような、Web上でアプリケーションサービスを提供する形態(SaaS)の利用がより進むと考えます。また、企業内でも業務システムなどのWeb化が進んでいくでしょう。
図1:Googleスプレッドシート(上)とWAI-ARIAサンプルコード(下)

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

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

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

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

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

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

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

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

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



株式会社アークウェブ 志田 裕樹
著者プロフィール
株式会社アークウェブ 志田 裕樹
取締役 CTO
2004年1月より株式会社アークウェブの創業スタッフとして勤務。SEとしてさまざまなWebシステムの構築に従事。オープンソースコミュニティーZen Cart.JPにてコミッターの役割を務め、Zen Cart、Ajax、Ruby on Railsなどの記事執筆も行っている。
http://www.ark-web.jp/

この記事の評価をお聞かせください
ボタンをクリックしますとウインドウが開きます。
ご意見、ご要望にお応えします! インプレスIT INSIDE


INDEX
第1回:FF3、IE8が対応!これがWAI-ARIA
-> Ajaxがもたらした恩恵
  Ajax版チェックボックスのサンプルの読み上げ
  WAI-ARIAの全体像
【見やすさと使いやすさ】WAI-ARIAによるアクセシブルRIA
第1回 FF3、IE8が対応!これがWAI-ARIA
第2回 Ajaxの動的更新を読み上げ
第3回 アクセシブルなウィジェットたち
第4回 自作ウィジェットをアクセシブルにせよ!
関連記事
使いやすさと見やすさ
Webデザインワークフロー
使える!Webデザインアプリ
現場で使える!Flash
これならわかる!JavaScript/Ajax
即実践!HTML+CSS
Webデザイナは知っていた

Think IT 過去人気記事

注目おすすめ情報

Think IT人気ライター BEST 5







【PR情報】

転職ならen転職ならエン派遣ならenアルバイトならen求人ならen