accessibility - sr-only 在 Internet Explorer 中不起作用

Question

我有一个活动区域，单击按钮会增加显示的计数值（类似于投票/喜欢）。屏幕阅读器要读出的消息是一个计算值，例如：“1 人喜欢这篇文章”/“没有人喜欢这篇文章”/“8 人喜欢这篇文章”。这些消息在客户端脚本（计数值）中计算并在服务器脚本（最终消息）中定义。

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

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

</div>

这在 chrome 中完美运行，但不能在 Windows 中使用 Jaws 屏幕阅读器读出 IE 中的消息。

Answer 1

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

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>