title: Accessibility: does `tabindex="-1"` mean the element is not visible to screenreaders (similar to `aria-hidden="true"`)
body: <p>I have a webpage where a dialog <code>&lt;section role="dialog"&gt;</code> element opens on-top-of content, causing the elements/content underneath to be inaccessible.</p>
  
  <p>While the dialog is open, all content underneath receives <code>tabindex="-1"</code> to keep the tab-focus within the dialog. </p>
  
  <p>The content underneath also receives a CSS class that blurs the elements, and sets <code>pointer-events</code> to none so the elements are not clickable with a mouse, but these elements are still all present and visible in the DOM (they are NOT set to <code>display: none</code>).</p>
  
  <p>Two questions:</p>
  
  <ol>
  <li>Do I also need to add <code>aria-hidden="true"</code> to all of these elements too? 
  
  <ul>
  <li>I understand the content will no longer be focusable with the tab key, but I'm not sure if the screenreader will still attempt to read the content.</li>
  </ul></li>
  <li>If I am setting <code>aria-hidden="true"</code> on these elements, and later reverting to <code>aria-hidden="false"</code>, will the screenreader pick-up that this change happened?
  
  <ul>
  <li>I'm worried that setting <code>aria-hidden="true"</code> means the screenreader will not consider the element again, even if I set it later to <code>aria-hidden="false"</code>.</li>
  <li>Do I need <code>aria-live</code> on the shared parent element (where both the dialog and content exist)?</li>
  <li>Even with <code>aria-live</code>, would the screenreader consider elements that were previously set to <code>aria-hidden="true"</code>?</li>
  </ul></li>
  </ol>
  
  <p>Note: the dialog is a form with a submit button. Sometimes it could include a <code>Dismiss</code> button, but not in every case. The dialog could be acting as a gate that requires submitting the form to continue.</p>