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 1375·ï [¾ÜºÙ]

¥È¥Ã¥×   ÊÔ½¸ Åà·ë º¹Ê¬ ¥Ð¥Ã¥¯¥¢¥Ã¥× źÉÕ Ê£À½ ̾Á°Êѹ¹ ¥ê¥í¡¼¥É   ¿·µ¬ °ìÍ÷ ñ¸ì¸¡º÷ ºÇ½ª¹¹¿·   ¥Ø¥ë¥×   ºÇ½ª¹¹¿·¤ÎRSS
Last-modified: 2009-10-02 (¶â) 11:04:35 (5480d)

¥¢¡¼¥¯¥¦¥§¥Ö¤Î¥µ¡¼¥Ó¥¹¤ä¥½¥ê¥å¡¼¥·¥ç¥ó¤Ï¤³¤Á¤é