屏幕阅读器无法读取 Firefox 中的 Aria-Live答案

【问题标题】：Aria-Live in Firefox not read by screen reader屏幕阅读器无法读取 Firefox 中的 Aria-Live
【发布时间】：2020-11-30 14:40:25
【问题描述】：

我遇到了一个问题，即屏幕阅读器无法读取在 FireFox 的 aria-live 部分中更改的文本。

这是一个简单的页面示例，在 chrome 中，屏幕阅读器会在更改进入时读取更改，而在 FireFox 中则不会：

<div aria-live="assertive" id="moo">

</div>
<script>
  let i = 0;
  setInterval(() => {
    document.getElementById('moo').innerText = 'moo' + i++
  }, 2000)
</script>

我做错了吗？除了人们与 Firefox 一起使用的 aria-live 之外，还有其他方式来宣布更改的到来吗？

我在 Mac-Firefox-VoiceOver 上测试过（它适用于 Mac-Chrome-VoiceOver）

【问题讨论】：

你试过在上面加aria-atomic=“true”吗？如果可能，您还应确保页面加载时页面上存在活动区域。
Firefox 通常不能很好地与 VoiceOver 配合使用。在 Windows 上使用 NVDA 和 JAWS 测试 Firefox 会更好。

标签： javascript html firefox accessibility aria-live

【解决方案1】：

当前 Firefox 版本：83.0（64 位）
Firefox Nightly 版本：85.0a1 (2020-11-29) (64-bit)
在最新的 Nightly 版本中，aria-live on firefox + voiceOver 的组合已修复！ ? 万岁！

参考： Firefox/Voiceover: aria-live regions not being announced

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aria-live Demo</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <style>
    body {
  margin: 1em;
}

button {
  margin-top: 1em;
  display: block;
}
  </style>
</head>
<body>
  <h1>Aria-live Demo</h1>
  <p>Testing <code>aria-live</code><br><button>Add Content</button><button id="add-more" >Add more content</button></p>

  <!-- add aria-live="polite" -->
  <div class="target" aria-live="polite" ></div>
 
  <script type="text/html" id="test-content">
    <h2>Custom Content</h2>
    <p>Hello there! I am content that is going to be plunked into a container via javascript</p>
  </script>

  <input placeholder="messgae somebody"/>
<script>
$("button").on("click", function(){
  $(".target").html($("#test-content").html());
});

$("#add-more").on("click", function(){
  $(".target").append("<p>Hello World</p>");
});

$(document).on("keydown", function(e){
  // press space to add content
    if(e.keyCode === 32) {
        $(".target").append("<p>Hello World</p>");
    }
});

</script>
</body>
</html>

【讨论】：