jQuery UI に見る WAI-ARIA の実装：dialog 編のバックアップ(No.3)

<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 タグ内の内容が表示されます

↑

[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の仕様を確認します。

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>

↑

[edit]

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

<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タグは同じ実装になっているのかもしれません…

↑

[edit]