sr-only 在 Internet Explorer 中不起作用

Question

我有一个实时区域，单击该按钮会增加显示的计数值（类似于 votes/likes）。屏幕要读出的信息reader是一个计算值，例如：“1人喜欢这篇文章”/"No one has liked this article"/“8人喜欢这篇文章”。这些消息在客户端 script(count value) 中计算并在服务器 script(final message).

中定义

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

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

</div>

这在 chrome 中完美运行，但无法在 Windows 中使用 Jaws 屏幕 reader 在 IE 中读出消息 reader。

Answer 1

我尝试了几种方法，这个最适合我，解决了这个问题，屏幕 reader 文本在所有浏览器中都能完美读出。

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>

sr-only 在 Internet Explorer 中不起作用

sr-only not working in Internet Explorer

accessibility

screen-readers

jaws-screen-reader

aria-live