JavaScript彈出對話框沒有被網頁輔助功能讀取屏幕閱讀器

Question

我有一個項目需求，我正在構建的網頁需要被JAWS屏幕閱讀軟件讀取，但客戶端只能訪問JAWS 11作爲他們的最新版本。

我們目前在網絡上有很多表單都有基於JavaScript的彈出對話框，現在一個很大的問題是JAWS 11軟件無法讀取下面的彈出文本。下面的彈出對話框（HTML）有什麼問題？

<div class="modal fade" id="EditContentModal" tabindex="-1" role="dialog" aria-labelledby="editContentDialogTitle" 
aria-hidden="true" title="Edit Content Pop-up Dialog Window" aria-describedby="editContentDialogTitle"> 
    <div class="modal-dialog" > 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close" value="Close"><span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title" id="editContentDialogTitle">Edit: Content ID <span id="lblContentid"></span></h4> 
      </div> 

      <div class="modal-body"> 
       <div class='row'> 
        <div class='col-md-8'> 
         <div class='form-group'> 
          <label for="edit_Contentnumber">Content Number</label> 
          <input type="text" class="form-control" max-length="20" id="edit_Contentnumber" /> 
         </div> 
        </div> 
       </div> 
       <div class='row'> 
        <div class='col-md-8'> 
         <div class='form-group'> 
          <label for="edit_Educationalinsitution">Educational Insitution</label> 
          <input type="text" class="form-control" max-length="100" id="edit_Educationalinsitution" /> 
         </div> 
        </div> 
       </div> 
       <div class='row'> 
        <div class='col-md-8'> 
         <div class='form-group'> 
          <label for="edit_TotalAmountforRecovery">Total Amount Available for Recovery</label> 
          <input type="text" class="money form-control" max-length="10" id="edit_TotalAmountforRecovery" /> 
         </div> 
        </div> 
       </div> 
       <div class='row'> 
        <div class='col-md-8'> 
         <div class='form-group'> 
          <label for="edit_source">Source</label> 
          <select id="edit_source" class="form-control"></select> 
         </div> 
        </div> 
       </div> 
       <div class='row'> 
        <div class='col-md-8'> 
         <div class='form-group'> 
          <label for="edit_indemletterdate">Indemnification Letter Date</label> 
          <input type="text" class="form-control datepicker" id="edit_indemletterdate" /> 
         </div> 
        </div> 
       </div> 
       <div class='row'> 
        <div class='col-md-8'> 
         <div class='form-group'> 
          <label for="edit_Contentreceiveddate">Content Received Date</label> 
          <input type="text" class="form-control datepicker" id="edit_Contentreceiveddate" /> 
         </div> 
        </div> 
       </div> 
       <div class='row'> 
        <div class='col-md-8'> 
         <div class='form-group'> 
          <label for="edit_site">Site</label> 
          <select id="edit_site" class="form-control"> 
          </select> 
          @*<input type="text" class="form-control" max-length="10" id="edit_site" />*@ 
         </div> 
        </div> 
       </div> 
       <div class='row'> 
        <div class='col-md-8'> 
         <div class='form-group'> 
          <label for="edit_status">Status</label> 
          <select id="edit_status" class="form-control"> 
          </select> 
         </div> 
        </div> 
       </div> 

       <input type="hidden" id="edit_Contentid" /> 
       <img id="displayBlockUI" alt="Spinner" src="~/Images/loader2.gif" width="32" height="32" style="display:none" /> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" id="cancel_edit" class="btn btn-default" data-dismiss="modal" value="Close">Close</button> 
       <button type="button" id="save_edit" class="btn btn-primary" value="Save">Save</button> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

你怎麼打開模態？由於在wrapper div上的tabindex爲-1，所以您只能通過JavaScript將屏幕閱讀器和鍵盤焦點發送到模式。在這種情況下，最好移動打開模式的腳本的焦點部分。另一方面，如果通過鏈接打開它，則可以完全刪除該tabindex屬性，並將包裝div的id放入鏈接href中，例如， <a href=#EditContentModal>

無論哪種方式，請記住將焦點發回到模式關閉時開始的位置。

編輯澄清：包裝div上的tabindex =「 - 1」屬性阻止鍵盤訪問。去掉它。請參閱MDN's tabindex reference：負值表示該元素應該是可調焦的，但不應通過順序鍵盤導航到達。