** 目次 [#a9f15980]
#contents
** はじめに [#m73e1f24]
こんにちは。竹村です。
JavaScriptのライブラリである jQuery のユーザーインターフェイス関連を
実装している『jQuery UI』がWAI-ARIAに対応しつつある。ということを
下記の記事で知り、どのように実装されているかを確認してみました。
- WAI-ARIA Implementation in JavaScript UI Libraries - updated
http://www.paciellogroup.com/blog/?p=313
今回は、jQuery UI の dialog ウィジェットのWAI-ARIAの実装を確認します。
*** 簡単なWAI-ARIAの説明 [#m135928c]
まず、WAI-ARIAについては、下記を確認ください。
- WAI-ARIA導入（日本語訳）
http://d.hatena.ne.jp/aratako0/20090709/p1
- 第1回：FF3、IE8が対応！これがWAI-ARIA
http://www.thinkit.co.jp/article/133/1/
ザックリ説明すると、AjaxやDHTMLなどで動的に変化するコンテンツで、
コンテンツが変化したことをスクリーンリーダーなどの支援技術に伝える
ために、HTMLを拡張した仕様です。
** 準備 [#rd0602c4]
支援技術側がWAI-ARIAに対応していなければ利用できません。
今回は、ブラウザにFirefox、スクリーンリーダーにJAWS 10を使用します。
#blikimore
- Firefox
http://mozilla.jp/firefox/
- JAWS 10(無料トライアル版)
http://www.freedomscientific.com/downloads/demo/FS-demo-downloads.asp
- JAWSの設定
-- options - Voices - Global Adjustment...
-- Profile Name: SAPI 5 に変更
-- Voice Rate: 18 に変更、Person: LH Naoko - Japan に変更、Pitch: 17 に変更
** 動作検証 [#o257ba79]
*** WAI-ARIA対応済みバージョンを試す [#gf5e0a9f]
まずは、dialogの機能の紹介と、それがどのように読まれるかを確認します。
http://okra.ark-web.jp/~takemura/public/js/wai-aria/jquery_dialog/
JAWSを起動した状態で、Firefoxから上記URLにアクセスします。
[Open Dialog]のリンクまで「↓キー」で移動して、''「link Open Dialog」''という読み上げに対して「エンターキー」を押すと、ダイアログが表示されます。
ダイアログ表示の際は、''「ダイアログのタイトル dialog ... OK put on」''と読み上げられます。
「↓キー」でコントロールを移動していくと、''OK,Cancel,[×]ボタンが音声で反応しています。''
- ちなみに、IE8で読み上げさせてみると、ダイアログ表示の際に「OK put on」とだけしか読み上げられませんでした。
*** 旧バージョンではどうだったか? [#b348169c]
WAI-ARIAが対応されたjQuery UIは、1.7.1からなので、1.6バージョンはどうだったかを見てみます。
http://okra.ark-web.jp/~takemura/public/js/wai-aria/jquery_dialog/index_1.6.html
[Open Dialog]のリンクまで移動「↓キー」で移動して、「link Open Dialog」という読み上げに対して「エンターキー」を押すと、ダイアログが表示されます。
ダイアログ表示の際は、「Close put on」とだけ読み上げられます。
「↓キー」でコントロールを移動していくと、OK,Cancel,[×]ボタンが音声で反応しています。
この辺は変わらないようですね。
** jQueryのdialogウィジェットの使い方 [#z23bf6e3]
簡単に jQuery UI の dialog ウィジェットの使い方を説明します。
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
return false;
});
(略)
});
</script>
(略)
<h2>Dialog</h2>
<p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>
<!-- ui-dialog -->
<div id="dialog" title="ダイアログのタイトル">
<p>ダイアログの内容です。</p>
</div>
- JavaScript内のコード、''$('#dialog').dialog'' で、<div id="dialog" ...>がダイアログであると指定しています
- $('#dialog').dialog のオプションについては、下記参照。
-- 参考：http://docs.jquery.com/UI/Dialog#options
- ''$('#dialog_link').click''で、<a href="#" id="dialog_link" ...>のクリックで、ダイアログを開くように指示しています
- ダイアログのタイトルは、''<div id="dialog" title="ダイアログのタイトル">'' のように、title属性に書いておいたものが表示されます
- ダイアログの内容は、上記 div タグ内の内容が表示されます
** ソースコード検証 [#b7f695aa]
ダイアログを表示させた時の、ソースを確認してみます。
Firefoxの場合、ダイアログが表示されている状態で、Ctrl+a で全体を選択して、右クリック「選択した部分のソースを表示 (E)」で表示されます。
<div aria-labelledby="ui-dialog-title-dialog" role="dialog" tabindex="-1" class="ui-dialog ui-widget ui-widget-content ui-corner-all" style="overflow: hidden; display: block; position: absolute; z-index: 1001; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0px; height: auto; width: 600px; top: 298px; left: 328.5px;">
<div style="-moz-user-select: none;" unselectable="on" class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<span style="-moz-user-select: none;" unselectable="on" id="ui-dialog-title-dialog" class="ui-dialog-title">ダイアログのタイトル</span>
<a style="-moz-user-select: none;" unselectable="on" role="button" class="ui-dialog-titlebar-close ui-corner-all" href="#">
<span style="-moz-user-select: none;" unselectable="on" class="ui-icon ui-icon-closethick">close</span></a>
</div>
<div style="height: auto; min-height: 64px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
<p>ダイアログの内容です。</p>
</div>
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
<button class="ui-state-default ui-corner-all" type="button">Ok</button>
<button class="ui-state-default ui-corner-all" type="button">Cancel</button>
</div>
// Tips
// ちなみに、しきりにでてくる「unselectable="on"」や「-moz-user-select: none;」はドラッグによる選択を防ぐ方法らしい。(参考：http://programming-magic.com/?id=112)
// 実際に、ダイアログのタイトル文字はドラッグできないようになっている。
// dialogメソッドを実行する際にオプションとして「draggable: true (or false)」を渡せる。この場合はドラッグできるようになるかと思ったが、ドラッグできなかった…
// ちょっとこの辺は不明。
*** role="dialog" の挙動について [#t6dc061a]
<div aria-labelledby="ui-dialog-title-dialog" role="dialog" ...>
role="dialog" とあるので、dialogというroleの仕様を確認します。
- Role: dialog
http://www.hitachi.co.jp/universaldesign/wai-aria/ED_20080514/#dialog
> ダイアログボックスは、タイトルを伴っているべきである。
> タイトルは、他のメカニズムが存在しなければ、labelledbyのプロパティから提供されることがある。
という仕様なので、div タグに aria-labelledby 属性が指定され、 ui-dialog-title-dialog と書かれています。
これは、下記のように id で書かれた部分をタイトルとして指定しています。
<span (略) id="ui-dialog-title-dialog" class="ui-dialog-title">ダイアログのタイトル</span>
*** role="button" の挙動について [#pe476cb7]
<a (略) role="button" (略) href="#"><span (略)>close</span></a>
閉じるボタンに、role="button"と書いてある。buttonの仕様を確認します。
- Role: button
http://www.hitachi.co.jp/universaldesign/wai-aria/ED_20080514/#button
> ボタンは、オプションのpressedのステート（state）をサポートする。(略)
> ステート（state）が存在しなければ、そのボタンは単純なコマンドボタンである。
というわけで、これはコマンドボタンとして動作しているようですね。
OK, Cancelボタンについては、buttonタグを使っている。この違いはJAWSでは特に文言に違いが見られませんでした。
コマンドボタンと、buttonタグは同じ実装になっているのかもしれません…
** まとめ [#b60263a5]
jQeury UI の dialog ウィジェットについては、少しアクセシブルになった程度ですが、
dialogとしてウィンドウが開いたことを利用者が認知できるようになったのは重要なことです。
また、我々Web制作者がアクセシビリティ上気をつけることとして、
利用するライブラリが WAI-ARIA などアクセシビリティに対応しているものを
選択して利用するようになれば、一定の水準を満たせるようになるのではないかと思います。
#blikifooter(竹村)
