jQuery UI に見る WAI-ARIA の実装:dialog 編 http://www.ark-web.jp/accessibility/2297.html

[edit]

目次

[edit]

はじめに

こんにちは。竹村です。

JavaScriptのライブラリである jQuery のユーザーインターフェイス関連を
実装している『jQuery UI』がWAI-ARIAに対応しつつある。ということを
下記の記事で知り、どのように実装されているかを確認してみました。

今回は、jQuery UI の dialog ウィジェットのWAI-ARIAの実装を確認します。

[edit]

簡単なWAI-ARIAの説明

まず、WAI-ARIAについては、下記を確認ください。

ザックリ説明すると、AjaxやDHTMLなどで動的に変化するコンテンツで、
コンテンツが変化したことをスクリーンリーダーなどの支援技術に伝える
ために、HTMLを拡張した仕様です。

[edit]

準備

支援技術側がWAI-ARIAに対応していなければ利用できません。
今回は、ブラウザにFirefox、スクリーンリーダーにJAWS 10を使用します。

[edit]

動作検証

[edit]

WAI-ARIA対応済みバージョンを試す

まずは、dialogの機能の紹介と、それがどのように読まれるかを確認します。

http://okra.ark-web.jp/~takemura/public/js/wai-aria/jquery_dialog/

jquery_ui_dialog_sample.jpg

JAWSを起動した状態で、Firefoxから上記URLにアクセスします。

[Open Dialog]のリンクまで「↓キー」で移動して、「link Open Dialog」という読み上げに対して「エンターキー」を押すと、ダイアログが表示されます。

ダイアログ表示の際は、「ダイアログのタイトル dialog ... OK put on」と読み上げられます。

「↓キー」でコントロールを移動していくと、OK,Cancel,[×]ボタンが音声で反応しています。

[edit]

旧バージョンではどうだったか?

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,[×]ボタンが音声で反応しています。
この辺は変わらないようですね。

[edit]

jQueryのdialogウィジェットの使い方

簡単に 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>
[edit]

ソースコード検証

ダイアログを表示させた時の、ソースを確認してみます。
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>
[edit]

role="dialog" の挙動について

<div aria-labelledby="ui-dialog-title-dialog" role="dialog" ...>

role="dialog" とあるので、dialogというroleの仕様を確認します。

という仕様なので、div タグに aria-labelledby 属性が指定され、 ui-dialog-title-dialog と書かれています。
これは、下記のように id で書かれた部分をタイトルとして指定しています。

<span (略) id="ui-dialog-title-dialog" class="ui-dialog-title">ダイアログのタイトル</span>
[edit]

role="button" の挙動について

<a (略) role="button" (略) href="#"><span (略)>close</span></a>

閉じるボタンに、role="button"と書いてある。buttonの仕様を確認します。

というわけで、これはコマンドボタンとして動作しているようですね。

OK, Cancelボタンについては、buttonタグを使っている。この違いはJAWSでは特に文言に違いが見られませんでした。
コマンドボタンと、buttonタグは同じ実装になっているのかもしれません…

[edit]

まとめ

jQeury UI の dialog ウィジェットについては、少しアクセシブルになった程度ですが、
dialogとしてウィンドウが開いたことを利用者が認知できるようになったのは重要なことです。

また、我々Web制作者がアクセシビリティ上気をつけることとして、
利用するライブラリが WAI-ARIA などアクセシビリティに対応しているものを
選択して利用するようになれば、一定の水準を満たせるようになるのではないかと思います。

[edit]

付録

2009年10月2日追記

http://okra.ark-web.jp/~takemura/public/js/wai-aria/jquery_dialog/

[Open Dialog]のリンクまで「↓キー」で移動して、「link Open Dialog」という読み上げに対して「エンターキー」を押すと、ダイアログが表示されます。

ダイアログ表示の際は、「OK ボタン」とだけ読み上げられます。

投稿者竹村 | パーマリンク

| このエントリをはてなブックマークに登録

tag: JavaScript, jQuery, Ajax


添付ファイル: filejquery_ui_dialog_sample.jpg 910件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2009-10-02 (金) 11:04:35 (2795d)

アークウェブのサービスやソリューションはこちら