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

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の全体像と、各ブラウザおよび支援技術のサポート状況について説明します。