屏幕閱讀器 - jQuery彈出

我彈出一個用戶必須單擊以填寫表單並提交表單。我不想離開這個頁面，因此我正在使用一個彈出窗口的原因（對此也開放了一些建議）。屏幕閱讀器 - jQuery彈出

我在這裏遇到的問題是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符合/可訪問。

來源

2013-08-27 Mimeto

爲什麼要製作一個新窗口？這將有助於：

window.open('windowname');

來源

2013-11-03 14:02:12 ArmaGeddON

當涉及到508合規性時，JQuery彈出窗口非常討厭。但是有幾件事可以幫助JAWS更好地閱讀它。

添加標籤以將每個控件綁定到其標籤。
將標籤內部的窗體控件分組
是否可以將此窗體放入此頁面的內聯部分中？這樣，您可以將該部分保持隱藏狀態直到需要，然後展開該頁面以顯示給用戶。

來源

2013-12-04 18:52:00 508Ninja

在<div id="createIndexDialog"

添加role="alertdialog"

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

來源

2014-01-18 16:30:24

屏幕閱讀器 - jQuery彈出

回答

相關問題