在 Google Chrome 中，NVDA（辅助功能屏幕阅读器）不读取引导模式对话框中的文本

Question

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

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

我有使用 Bootstrap Modal 创建的“信息对话框”框。在 Firefox 中，当光标位于对话框中的所有段落和元素上时，它们会被大声朗读出来，但在 Chrome 中它们不会——当指向模态框内的任何内容时会保持沉默。

首先，在 JSFiddle 中的 Firefox 中测试模态，以验证模态的段落/按钮是否有效（获得语音）。然后，与 Chrome 进行比较：模态框内的任何内容都不起作用。在 Chrome 中唯一可以表达的是外部的按钮标签，而不是模式的内容。

Bootstrap Modal 对话框如下所示，

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