フォームに入力してフォームを送信するためにユーザーがクリックする必要があるポップアップがあります。ページを離れたくないので、ポップアップを使用しています (これに関する提案も受け付けています)。
ここで私が抱えている問題は、ポップアップが開かれたときに JAWS (スクリーン リーダー) が認識しないことです。ポップアップ内の入力フィールドの 1 つにフォーカスを設定しようとしましたが、その入力フィールドのみを読み取り、元のページを引き続き読み取ります。フォーカスされた入力以外の見出しやその他のものを無視します。ポップアップが開いたことをスクリーンリーダーに警告し、スクリーンリーダーにポップアップを強制的に読み取らせて停止させる方法を知っている人はいますか?
これは、クリックするとポップアップが表示されるボタンです。
<button type="submit" name="btnCreatee" id="btnCreate" value="#createIndexDialog">Create Index</button>
これは、ポップアップの HTML コンテンツです。
<div id="createIndexDialog" class="window" style="background-color:#ffffff;">
<div align="right"><a href="#" class="closeIndexCreation" id="closeIndexCreation"></a></div>
<h2 style="text-align:center;color:#333;">Create an Index</h2>
<br />
<ul class="statusMessages" style="background: transparent;"></ul>
<form name="createIndexFrm" id="createIndexFrm" method="post" action="createIndex.do">
<input type="hidden" name="operation" value="create">
<div id="t" border="0">
<div style="display:block;margin:0 0 15px 54px;">
<span ><b>Name:</b><input type="text" class="requiredField" maxlength="16" name="name" id="name" size="40" onblur="checkform()" style="margin-left:8px;"></span>
</div>
<div style="display:block;margin:0 0 15px 104px;">
<span>
<ul style="list-style:none;background:#fff;border:2px solid #ebebeb;padding:5px;border-radius:5px;width:auto;">
<li>Index name can not be changed later.</li>
<li>It is not case sensitive.</li>
<li>Specify from 1 to 30 characters using letters (A-Z, a-z) or numbers (0-9)</li>
</ul>
</span>
</div>
<div style="display:block;margin:0 0 15px 54px;">
<span ><b>Type:</b><input type="radio" name="data_source_type" value="0" checked style="margin-left:5px;"> Database, <i>Select data via database connection</i></span>
</div>
<div style="display:block;margin:0 0 15px 0px;">
<span ><b>Display Name:</b><input type="text" maxlength="30" name="displayName" id="displayName" size="40" value="" style="margin-left:8px;"></span>
</div>
<div style="display:block;margin:0 0 15px 15px;">
<span ><b>Description:</b><textarea name="desc" id="desc" cols="75" rows="3" wrap="virtual" style="margin-left:5px;"></textarea></span>
</div>
<div style="display:block;margin-left:240px;">
<span><button type="submit" class="general ui-corner-all" name="submitCreate" id="submitCreate" onclick="createIndexFrm.operation.value='create'; document.createIndexFrm.submit(); return false;">Create</button></span>
</div>
</div>
</form></div>
これは、ポップアップを作成して表示するコードです。
$('button[name=btnCreatee]').click(function(e) {
e.preventDefault();
var id = $(this).attr('value');
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$('#mask').css({'width':maskWidth,'height':maskHeight});
$('#mask').fadeIn(200);
$('#mask').fadeTo("fast",0.8);
var winH = $(window).height();
var winW = $(window).width();
//$(id).css('top', winH/2-$(id).height()/2);
//$(id).css('left', winW/2-$(id).width()/2);
//$(id).fadeIn(400);
$('#createIndexDialog').css('left', winW/2-$('#createIndexDialog').width()/2);
$('#createIndexDialog').show();
});
PS ページ 508 に準拠/アクセス可能にするために、既存のコードを編集しています。