title: In Google Chrome, NVDA (Accessibility Screen Reader) Does Not Read Text in Bootstrap Modal Dialog
body: <p><strong>JSFiddle</strong>: <a href="https://jsfiddle.net/jnv07akx/" rel="nofollow noreferrer">https://jsfiddle.net/jnv07akx/</a></p>
  
  <p>I'm using the NVDA Screen Reader to test my GUI for 508/accessibility compliance.</p>
  
  <p>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 <strong>Chrome</strong> they do not -- there is silence when pointing at anything inside the modal.</p>
  
  <p>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.</p>
  
  <p>The Bootstrap Modal dialogs look like this,</p>
  
  <pre><code>&lt;div class="modal" id="modalGapInfoSimple" tabindex="-1" role="dialog" aria-labelledby="modalGapInfoSimpleLabel" aria-hidden="true" style="display: block;"&gt;        
          &lt;div class="modal-dialog" role="document"&gt;
              &lt;div class="modal-content" style="margin:0 auto;"&gt;
                  &lt;div class="modal-header" style="text-align:center;padding-bottom: 5px !important;"&gt;
                      &lt;div style="text-align:center;"&gt;
                          &lt;div class="modal-heading"&gt;
  
                              &lt;div style="text-align: left; width: 90%;"&gt; 
  
                                  &lt;h3 class="modal-title" id="modalGapInfoSimpleLabel"&gt;
                                      &lt;div class="modalHeader"&gt;Oops you have Gaps!&lt;/div&gt;
                                      &lt;span class="modaltext"&gt;                                    
                                          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.                            
                                      &lt;/span&gt;
                                  &lt;/h3&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="modal-body panel" style="margin-bottom: 0px !important; padding: 3px !important;"&gt;                      
                              &lt;div class="row"&gt;
                                  &lt;div class="col-md-12 col-sm-12 col-xs-12 text-right"&gt;
                                          &lt;div class="col-md-10 col-sm-10 col-xs-10"&gt;&lt;/div&gt;
                                          &lt;div class="pull-right"&gt;
                                              &lt;input value="OK" onclick="handleModalGapInfoSimple();" class="modalButton" data-dismiss="modal" aria-label="Close" type="button"&gt;
                                          &lt;/div&gt;                      
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>NOTE: I entered a bug for NVDA:</strong> <a href="https://github.com/nvaccess/nvda/issues/9156" rel="nofollow noreferrer">https://github.com/nvaccess/nvda/issues/9156</a></p>