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

Question

我遇到了一个问题，即屏幕阅读器没有读取 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）

Answer 1

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

参考： Firefox/Voiceover： aria-live 区域未公布

 <!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>

Answer 2

从MDN文档中，您可能应该指定role="timer" ＆ aria-live="assertive"

 function clock() { var now = new Date(); document.getElementById('clock').innerHTML = "Time: " + now.getHours() + ":" + ("0" + now.getMinutes()).substr(-2); } clock(); setInterval(clock, 60000);

 <div id="clock" role="timer" aria-live="assertive"></div>

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-11-30 06:34:22

解决方案2
0 2019-09-03 09:58:05

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-11-30 06:34:22

解决方案2 0 2019-09-03 09:58:05

解决方案1
1 已采纳 2020-11-30 06:34:22

解决方案2
0 2019-09-03 09:58:05