javascript - 在 chrome 上删除元素时,Aria-live 区域不会读取更新
问题描述
当您将元素动态添加到 aria-live 区域时,Chrome 会读出该区域中的所有项目,这很棒。
但是当您删除一个元素时,Chrome 不会重新读出该列表。当您将区域用于错误时,这是一个问题,例如当用户修复错误时,列表不会重新读出。
此处示例:https ://codepen.io/mildrenben/pen/WNNzVzN?editors=1010
<div aria-live='assertive'>
</div>
<button id='add'>add</button>
<button id='remove'>remove</button>
const addBtn = document.querySelector('#add')
const removeBtn = document.querySelector('#remove')
const ariaLive = document.querySelector('div')
let tick = 0
addBtn.addEventListener('click', () => {
let newElem = document.createElement('span')
newElem.textContent = tick
tick++
console.log(ariaLive, newElem)
ariaLive.appendChild(newElem)
})
removeBtn.addEventListener('click', () => {
ariaLive.removeChild(ariaLive.lastChild)
})
解决方案
正确的方法应该是使用aria-relevant
属性,但是浏览器支持很差,不可靠。
我通常不提倡做一些骇人听闻的事情来让浏览器以某种方式运行,但如果你真的需要让实时区域报告删除,我会建议以下内容:
- 将
aria-atomic
您的活动区域上的属性设置为true
。这意味着屏幕阅读器将在每次添加(但不删除)内容时读取活动区域的全部内容。 - 当您从活动区域中删除一个元素时,添加另一个不可见元素,等待几百毫秒,然后删除该元素。
- 按下删除按钮时,活动区域应宣布所有内容(减去删除)。
这里的小提琴示例:https ://jsfiddle.net/mug6vonf/3/
推荐阅读
- powershell - 如何获取 Azure DSC 配置以读取名称为参数的自动化帐户变量?
- node.js - Firestore + Passport.js 会话功能
- c# - UWP 已绑定复选框是否已选中?
- docker - 无法连接到虚拟机 Docker
- javascript - 使用“margin:auto”时不尊重“pointer-event:none”
- python - 如何使用python将xml存储到xlsx
- arrays - 设置 Azure 位置策略限制
- git - 如何在一台开发机器上拥有多个 git 帐户?
- c# - 在 Unity 中获取 Gizmo 位置
- sas - SAS函数以给定概率查找值