title: HTML accessiblity: make a screen reader announce hidden text when it gets shown
body: <p>According to the <a href="https://www.w3.org/TR/wai-aria/states_and_properties#aria-live" rel="nofollow noreferrer">w3 documentation</a> we can use the <code>aria-live</code> attribute to tell a screen reader to read the text contents of a HTML element when it gets changed. However, in my case, i wont be updating any text and simply want a screen reader to announce the contents of a <code>&lt;span&gt;</code> when it becomes visible under some condition (that is, by using jQuery's <code>.show()</code> function)</p>
  
  <p>here is a simplification of my HTML &amp; JS:</p>
  
  <pre><code>&lt;div class="toggleable_element" hidden&gt;
      &lt;span aria-live="assertive"&gt;Text to be read out&lt;/span&gt;
  &lt;/div&gt;
  ....
  &lt;script&gt;
      $("#toggleable_element").show();
  &lt;/script&gt;
  </code></pre>
  
  <p>Using aria-live like this wont trigger the screen reader from reading the text (i am using JAWS in this case).</p>
  
  <p>Another suggestion is to add the attribute <code>role="alert"</code> although this doesnt seem to trigger a screen reader announcement either.</p>
  
  <p>Any suggestions on how to get the contents of the span to be read aloud?</p>