[英]Aria-live region is not reading out updates when an element is removed on chrome
When you dynamically add an element to an aria-live region, Chrome will read out all the items in that region which is great.当您将元素动态添加到 aria-live 区域时,Chrome 会读出该区域中的所有项目,这很棒。
But when you remove an element, Chrome does not re-read out the list.但是当您删除一个元素时,Chrome 不会重新读出该列表。 This is an issue when you're using the region for errors and such, as when the user has fixed an error, the list is not re-read out.
当您将区域用于错误时,这是一个问题,例如当用户修复错误时,列表不会重新读出。
Example here: https://codepen.io/mildrenben/pen/WNNzVzN?editors=1010此处示例: 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)
})
The correct method should be to use the aria-relevant
attribute, however the browser support is very poor, and as such it is not reliable.正确的方法应该是使用
aria-relevant
属性,但是浏览器支持很差,不可靠。
I don't normally advocate for doing hacky things to make a browser behave a certain way, but if you really need to make the live region report removals, here's what I would suggest:我通常不提倡做一些骇人听闻的事情来让浏览器以某种方式运行,但如果你真的需要让实时区域报告删除,我会建议以下内容:
aria-atomic
attribute on your live region to true
.aria-atomic
属性设置为true
。 This means that the screen reader will read the entire contents of the live region each time content is added (but not removed). Example fiddle here: https://jsfiddle.net/mug6vonf/3/此处的小提琴示例: https://jsfiddle.net/mug6vonf/3/
You should also use aria-relevant :您还应该使用aria-relevant :
Values:
价值观:
A space-delimited list of one or more of the following values:
以下一个或多个值的空格分隔列表:
additions
are insertion of nodes into the live region;additions
是将节点插入活动区域; should be considered relevant.应该被认为是相关的。
removals
are deletion of nodes;removals
是删除节点; should be considered relevant.应该被认为是相关的。
text
are changes to the textual content of existing nodes;text
是对现有节点的文本内容的更改; should be considered relevant.应该被认为是相关的。
all
is equivalent to additions removals text.all
相当于添加删除文本。
aria-relevant="additions text"
is the default value on a live region.aria-relevant="additions text"
是活动区域的默认值。
The default value doesn't include removals
, which you probably need.默认值不包括您可能需要的
removals
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.