PR

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

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

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の仕様に関係があるタグだけを抜き出すと、下記のとおりになります。

aria-valuemin="0" aria-valuemax="100"
aria-valuenow="10" />

 「tabindex="0"」があることで、
タグに対して、TABキーでフォーカスを当てることができます。

 JAWSはフォームモード「OFF」時の上下キー操作でさまざまな要素にフォーカスを当てることができますが、そうでない支援技術でも、この指定によりTABキーでフォーカスが当てることが可能になります(参考:tabindexプロパティの解説(http://www.hitachi.co.jp/universaldesign/wai-aria/ED_20080514/#tabindex))。

 「role="slider"」は、この要素がスライダーであることを支援技術に伝えるためのロールです。この指定により、JAWSは下記のように読み上げます。

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

 またスライダーはフォーム部品であるため、フォームモード「ON」にすることができます。

 「slider」ロールで利用可能な各ステートおよびプロパティは次のとおりです(参考:「slider」ロールの解説:(http://www.hitachi.co.jp/universaldesign/wai-aria/ED_20080514/#slider))。

・valuemin:そのウィジェットが取りうる最小値
・valuemax:そのウィジェットが取りうる最大値
・valuenow:そのウィジェットの現在の値

 Dijitが生成したスライダーでは、上下キーで値が変更されると、valuenowが変更されます。

 JAWSはこれを検知して、下記のように読み上げます。

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

 valueminとvaluemaxは読み上げされませんでした。

 次のページでは、ツリーを使ったサンプルを紹介します。
株式会社アークウェブ
取締役 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会員サービスの概要とメリットをチェック

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