- Äɲ䵤줿¹Ô¤Ï¤³¤Î¿§¤Ç¤¹¡£
- ºï½ü¤µ¤ì¤¿¹Ô¤Ï¤³¤Î¿§¤Ç¤¹¡£
** Ìܼ¡ [#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(Ãݼ)