javascript - 屏幕阅读器无法读取 Firefox 中的 Aria-Live
问题描述
我遇到了一个问题,即屏幕阅读器没有读取在 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)
解决方案
当前firefox版本:83.0(64位)
Firefox Nightly版本:<strong>85.0a1 (2020-11-29) (64-bit)
在最新的Nightly版本中,火狐上的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>
推荐阅读
- java - 如果我们在 start 方法而不是 run 方法中执行整个 Thread 功能会发生什么?
- python - Python打印列表的第一行
- sql-server - SQL Server OPENROWSET Numeric vales 更改为 int
- c++ - 在二叉树中插入未处理的异常抛出
- google-bigquery - Airflow 的 bigqueryoperator 不能与 udf 一起使用
- mysql - 按周和月获取一天的平均小时数
- wordpress - 过滤自定义字段和分类法 Light not working o my wordpress site
- css - 相同的 CSS,不同的结果(Bootstrap4,仅限 Chrome)
- java - 带问号的菱形在加密信息中是否正常?
- react-native - 避免反应原生初始页面顶部有一些空间