Web 輔助功能屏幕閱讀器未讀取 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

將主要內容設置為 aria-hidden='true' 告訴屏幕閱讀器停止閱讀那里的內容。

嘗試使用 aria-hidden='false'

Answer 2

你是怎么打開模態的？ 因為包裝器 div 上的 tabindex 為 -1，您將只能通過 JavaScript 將屏幕閱讀器和鍵盤焦點發送到模態。 在這種情況下，最好移動打開模態的腳本的焦點部分。

另一方面，如果它是通過鏈接打開的，您可以完全刪除該 tabindex 屬性並將包裝器 div 的 id 放在鏈接 href 中，例如<a href=#EditContentModal>

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

編輯以澄清：包裝器 div 上的 tabindex="-1" 屬性阻止鍵盤訪問。 去掉它。 請參閱MDN 的 tabindex 參考：負值意味着該元素應該是可聚焦的，但不應通過順序鍵盤導航訪問。