在 Google Chrome 中，NVDA（輔助功能屏幕閱讀器）不會在 Bootstrap 模態對話框中讀取文本

Question

JSFiddle ： https : //jsfiddle.net/jnv07akx/

我正在使用 NVDA 屏幕閱讀器來測試我的 GUI 是否符合 508/可訪問性。

我有使用 Bootstrap Modal 創建的“信息對話框”框。 在 Firefox 中，當光標位於對話框上時，對話框中的所有段落和元素都會被大聲朗讀，但在Chrome 中則不然——當指向模態內的任何內容時，都會保持沉默。

首先，在 Firefox 中的 JSFiddle 中測試模態以驗證模態的段落/按鈕是否有效（獲得語音）。 然后，與 Chrome 進行比較：模態中的任何內容都不起作用。 在 Chrome 中唯一能表達的就是外面的按鈕標簽，而不是模態的內容。

Bootstrap 模態對話框如下所示，

<div class="modal" id="modalGapInfoSimple" tabindex="-1" role="dialog" aria-labelledby="modalGapInfoSimpleLabel" aria-hidden="true" style="display: block;">        
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="margin:0 auto;">
                <div class="modal-header" style="text-align:center;padding-bottom: 5px !important;">
                    <div style="text-align:center;">
                        <div class="modal-heading">

                            <div style="text-align: left; width: 90%;"> 

                                <h3 class="modal-title" id="modalGapInfoSimpleLabel">
                                    <div class="modalHeader">Oops you have Gaps!</div>
                                    <span class="modaltext">                                    
                                        Please edit the timeline to remove the Gaps. You can click on the Gap in your timeline and select the appropriate option presented to you in the prompt.                            
                                    </span>
                                </h3>
                            </div>
                        </div>
                        <div class="modal-body panel" style="margin-bottom: 0px !important; padding: 3px !important;">                      
                            <div class="row">
                                <div class="col-md-12 col-sm-12 col-xs-12 text-right">
                                        <div class="col-md-10 col-sm-10 col-xs-10"></div>
                                        <div class="pull-right">
                                            <input value="OK" onclick="handleModalGapInfoSimple();" class="modalButton" data-dismiss="modal" aria-label="Close" type="button">
                                        </div>                      
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>

注意：我為 NVDA 輸入了一個錯誤： https : //github.com/nvaccess/nvda/issues/9156

Answer 1

我也無法在 Firefox 中使用 NVDA。 您有aria-hidden="true"和display:block ，因此該對話框對視力正常的用戶可見，但對屏幕閱讀器隱藏。

刪除aria-hidden 。

<div class="modal" id="modalGapInfoSimple" tabindex="-1" role="dialog" aria-labelledby="modalGapInfoSimpleLabel" aria-hidden="true" style="display: block;">