sr-only not working in Internet Explorer

Question

I have a live region where a button when clicked increments the count value displayed(similar to votes/likes). The message to be read out by the screen reader is a computed value, example: "1 person likes this article"/"No one has liked this article"/"8 people like this article". These messages are computed in the client script(count value) and defined in the server script(final message) .

<div class="sr-only" role="alert" aria-live="polite">

   <span id="feedback-count">{{c.message}} /span>

</div>

This works perfectly in chrome but doesn't read out the message in IE in Windows using Jaws screen reader.

Answer 1

I tried a few approaches and this one works best for me, Fixed the issue and the screen reader text was read out perfectly in all browsers.

 functionToBeCalled = function(message) { aria_message = message; document.getElementById('screen-reader-tag-id').innerHTML = ''; document.getElementById('screen-reader-tag-id').innerHTML += '<p class="sr-only">'+ aria_message+'</p>' } 

 <div id="screen-reader-tag-id" class="sr-only" role="alert" aria-live="polite"> </div>