アクセシブルなウィジェットたち

Dojoで作成するウィジェットはWAI-ARIAに対応済み

　今回は、いくつかのJavaScriptウィジェット（以後、ウィジェット）のサンプルを紹介し、そのウィジェット内で使用されているWAI-ARIAのロールやステート、プロパティについて解説します。

　今回のサンプルはいずれもDojo Toolkit（http://dojotoolkit.org/）のウィジェットライブラリ「Dijit」を使用します（参考：Dijitの解説（http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit-0））。

　Dijitを使用することで、JavaScriptを記述せずに簡単にウィジェットを生成することができます。Dijitが生成するHTMLマークアップは、WAI-ARIAのロール、ステート、プロパティがすでに記述されていますので、WAI-ARIAに対応しているWebブラウザや支援技術を利用すればアクセシブルになります。

　今回のサンプルは、支援技術として「JAWS for Windows Version 9 日本語版」、Webブラウザには「FireFox 3」を利用しています。

　「JAWS for Windows Version 9 日本語版」は今秋発売予定になっており、この記事を執筆時点（2008年9月16日）ではまだ発売されておりませんが、有限会社エクストラ（http://www.extra.co.jp/）にご協力いただき、発売前の開発版を先行して利用させていただきました。

スライダーウィジェットのサンプルの解説

　最初に図1の「スライダーウィジェットのサンプル」の動画を確認しましょう。デモでは次の手順で操作を行っています。

1.上下キーで読み上げ位置をスライダー部分まですすめる
2.JAWSが次のように読み上げる

「10、上下スクロールバー」

3.エンターキーでJAWSのフォームモードをONにする
4.十字キーの上下で、スライダーの値を変更する
5.値が変更されるとJAWSが次のように読み上げる

「6.96...、トラックバー6%」

　このように、Dijitで生成されるウィジェットはキーボードのみで操作することができ、スクリーンリーダーの音声を聞くだけで操作が可能になっています。

　Dijitは表示上の装飾のため、さまざまなタグを生成しますが、そのうちWAI-ARIAの仕様に関係があるタグだけを抜き出すと、下記のとおりになります。