According to the w3 documentation we can use the aria-live 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 <span> when it becomes visible under some condition (that is, by using jQuery's .show() function)
here is a simplification of my HTML & JS:
<div class="toggleable_element" hidden>
<span aria-live="assertive">Text to be read out</span>
</div>
....
<script>
$("#toggleable_element").show();
</script>
Using aria-live like this wont trigger the screen reader from reading the text (i am using JAWS in this case).
Another suggestion is to add the attribute role="alert" although this doesnt seem to trigger a screen reader announcement either.
Any suggestions on how to get the contents of the span to be read aloud?
ON most recent screen reader + browser combinations, what you did should normally work.
I tried IE/Firefox/Chrome+Jaws/NVDA as well as VO on iOS 10. The contents of an aria-live element is read out when its content changes, but also when it becomes visible because of a change in CSS display or visibility properties. It is also read out when such an element is added in the DOM. Note that it works only with display and visibility CSS properties. Other CSS properties that may impact effective visibility don't work, e.g. opacity, transform, off-screen positionning, etc. The later are generally totally ignored by screen readers.
The thing that doesn't work, however, is adding the aria-live attribute after the element is shown or added in the DOM. Doing so, the element never become an aria-live region and no later content change is ever read out.
For this, almost all SR+browser combinations agree together.