屏幕閱讀器 - jquery彈出窗口

Question

我有一個彈出窗口，用戶必須單擊才能填寫表單並提交表單。 我不想離開頁面，因此我使用彈出窗口的原因（打開對此的建議）。

我在這里遇到的問題是，當彈出窗口打開時，JAWS（屏幕閱讀器）無法識別。 我嘗試將焦點設置到彈出窗口中的一個輸入字段，但它只讀取該輸入字段，然后繼續讀取原始頁面。 除了焦點輸入之外，忽略標題和其他任何內容。 也許任何人都知道我可以如何提醒屏幕閱讀器彈出窗口已打開然后強制屏幕閱讀器通讀彈出窗口並停止？

這是單擊時顯示彈出窗口的按鈕：

<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符合/可訪問。

Answer 1

在<div id="createIndexDialog"

add role="alertdialog"

這將有助於屏幕閱讀器識別彈出窗口。

Answer 2

你為什么要開一個新窗口？ 這將有助於：

window.open('windowname');

Answer 3

在508合規性方面，JQuery彈出窗口非常討厭。 但是你可以做幾件事來幫助JAWS更好地閱讀它。

• 添加標記以將每個控件綁定到其標簽。
• 將標簽內的表單控件分組
• 您是否可以將表單放在此頁面的內聯部分中？ 這樣，您可以隱藏該部分直到需要，然后展開頁面以向用戶顯示該部分。