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

Question

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

I'm using the NVDA Screen Reader to test my GUI for 508/accessibility compliance.

I have "Info Dialog" boxes created with Bootstrap Modal. In Firefox all paragraphs and elements in the dialog get read out loud when the cursor is on them, but in Chrome they do not -- there is silence when pointing at anything inside the modal.

First, test the modal in Firefox in the JSFiddle to verify that the modal's paragraphs/buttons work (get voiced). Then, compare with Chrome: none of the content inside the modal works. The only thing that gets voiced in Chrome is the button label which is outside, not the contents of the modal.

The Bootstrap Modal dialogs look like this,

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

NOTE: I entered a bug for NVDA: https://github.com/nvaccess/nvda/issues/9156

Answer 1

I can't get it to work with NVDA in Firefox either. You have aria-hidden="true" and display:block , so the dialog will be visible to sighted users but hidden to screen readers.

Remove aria-hidden .

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