title: Why are screenreaders not speaking this dialog correctly?
body: <p>We have a modal dialog being popped up using jquery, just to alert a user of some info before they start using the main part of the application. Nothing complex, but for some reason all the browser/screenreader combinations I've tested with fail to read all or part of the dialog.</p>
  
  <p>I've tested with IE8/JAWS15, Firefox/JAWS15 and Chrome/Chromevox. </p>
  
  <p>Here is the HTML for the dialog itself.</p>
  
  <pre><code>&lt;div id="divBrowserMessagePopup" class="ui-dialog-content ui-widget-content" aria-labelledby="divBrowserMessageTitle" aria-describedby="divBrowserMessage" hidden style="width: auto; min-height: 150px; height: auto; padding: 0px; border: 0px none;"&gt;
      &lt;div id="divBrowserMessageUserPopup"&gt;
          &lt;div class="modelpopup" style="border:0"&gt;
              &lt;div class="modelpopup-top"&gt;
                  &lt;span class="sprite close" id="browserMessage-popupclose"&gt;&lt;/span&gt;
                  &lt;div id="divBrowserMessageTitle"&gt; &lt;h1&gt;Title of Dialog&lt;/h1&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="modelpopup-content"&gt;
                  &lt;div id="divBrowserMessage"&gt;this is a very important message we want the user to "see!"&lt;/div&gt;
              &lt;/div&gt;   
              &lt;div class="model-button"&gt;
                  &lt;button class="button-lrg-pri float-right" id="btnBrowserMessageOk"&gt;OK&lt;/button&gt;
              &lt;/div&gt;     
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;    
  </code></pre>
  
  <p>Here is the jqueryUI script we're using to make it a dialog and show it.</p>
  
  <pre><code>$('#divBrowserMessagePopup').dialog({
          autoOpen: false,
          resizable: false,
          modal: true,
          width: '450px',
          open: function (event, ui) {
              $(this).css({ 'padding': '0', 'border': 0 });
          }
  
      });
  
  $("#showDialog").click(function (e) {
          $('#divBrowserMessagePopup').dialog('open');
  
          e.preventDefault ? e.preventDefault() : event.returnValue = false;       
      });
  </code></pre>
  
  <p>When the button is clicked, the dialog pops up just fine and the screenreader will usually speak "dialog" and possibly the title, but never the actual text of the dialog.</p>
  
  <p>You might note that there are two divs with id "divBrowserMessagePopup," which I thought might be causing the problem. I removed it, and the dialog actually did work... but ONLY in Firefox for some reason. </p>
  
  <p>Any idea why the text of the dialog would always be getting skipped?</p>