在 Google Chrome 中，NVDA（辅助功能屏幕 Reader）无法读取 Bootstrap 模态对话框中的文本

Question

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

我正在使用 NVDA 屏幕 Reader 来测试我的 GUI 是否符合 508/可访问性。

我用 Bootstrap 模式创建了 "Info Dialog" 个盒子。在 Firefox 中，当光标位于对话框中的所有段落和元素时，它们都会被大声朗读，但在 Chrome 中，它们不会——当指向里面的任何东西时会保持沉默模态

首先，在 JSFiddle 中测试 Firefox 中的模态，以验证模态的 paragraphs/buttons 工作（得到语音）。然后，与Chrome:none模态里面的内容进行比较。 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;">

在 Google Chrome 中，NVDA（辅助功能屏幕 Reader）无法读取 Bootstrap 模态对话框中的文本

In Google Chrome, NVDA (Accessibility Screen Reader) Does Not Read Text in Bootstrap Modal Dialog

html

google-chrome

section508

twitter-bootstrap

nvda