PR

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

2008年9月4日(木)
志田 裕樹

Ajax版チェックボックスのサンプルの読み上げ

 前のページで紹介したWAI-ARIAに対応したAjax版チェックボックスを、実際にFireFox3とスクリーンリーダーの「JAWS 9.0 for Windows(英語版)の無料お試し版(http://www.freedomscientific.com/products/fs/jaws-product-page.asp)(ドキュメントトーカ日本語音声合成エンジン無料お試し版(AquesTalk版)(http://www.createsystem.co.jp/DTalkerSapi1.html#%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%83%88%E3%83%BC%E3%82%AB%20PlusV2%E3%81%AE%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89)による日本語による読み上げ)」で読み上げをさせてみました。

 読み上げの様子を録画した動画を用意しましたので、まずはこちらを見てみてください(こちらのデモで使用したページは、Mozilla.orgのARIAテストページのcheckboxのサンプル(http://www.mozilla.org/access/dhtml/checkbox)を一部修正したものです。Mozillaなのでオープンソースライセンスだとは思いますが、ライセンスが不明のため念のため再配布はいたしません。ご自身で試される場合はこちらのページでお試しください)。

デモの解説

 それでは、上記のデモについて解説をします。

 はじめに、タブキーを押します。そうすると、タグであるにもかかわらず、フォーカスがあたり、次のように読み上げがされます。

 「タブ、テスト、チェックボックス、Not Checked、To check press spacebar」

 「タブ」は、タブキーを押したという意味です。

 「テスト」は、フォーカスがあたった部品のラベルが「テスト」という意味です。

 「チェックボックス」は、現在フォーカスがあたった部品がチェックボックスというフォーム部品であるという意味です。

 「Not Checked」は、チェックボックスがチェックされていないという意味です。

 「To check press spacebar」は、チェックボックスをONにするにはスペースキーを押してくださいという意味になります。

 「role="checkbox"」と指定してあるので、「チェックボックス」部品であると読み上げられています。「tabindex="0"」と指定してあるので、タブキーでフォーカスがあたるようになっています。

 次に、スペースを押します。そうすると、チェックボックスがチェック状態の画像にさしかわり、「Checked」(チェックボックスがチェックされたという意味)と読み上げがされます。

 スペースキーを押すと、タグのonKeyDownイベントが発生し、checkBoxEvent()イベントハンドラが呼ばれます。このイベントハンドラは従来のAjaxアプリケーションの開発と同様に、JavaScriptプログラマが作成しなければなりません。このハンドラ内では、次の処理を行います。

・スペースキーが押されているかどうかを判定
・aria-checked="true" という属性を追加
・画像のsrc属性を「checked.gif」に変更

 スクリーンリーダーは「aria-checked="true"」が追加されたことを検知して「Checked」と読み上げています。

 さらに、もう一度スペースキーを押します。そうすると、チェックボックスが非チェック状態の画像にさしかわり、「Not Checked」(チェックボックスがチェックされていないという意味)と読み上げがされます。

 「aria-checked="true"」がなくなったため、スクリーンリーダーは「Not Checked」と読み上げています。

 このように、WAI-ARIAはHTMLの属性の拡張を定義することで、スクリーンリーダーがJavaScriptウィジェットの役割や、またそのウィジェットの状態などの意味情報を取得することを可能にし、読み上げをできるようにします。

 次のページでは、WAI-ARIAの全体像と、各ブラウザおよび支援技術のサポート状況について説明します。

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

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています