在 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;">