如何避免屏幕阅读器在聚焦元素时读取标签更改？

Question

当用户使用选项卡聚焦元素时，屏幕阅读器应读取 aria-label 或 aria-describedby 内容。如果用户从同一元素触发任何操作，则 aria-描述的内容将更改，但屏幕阅读器不应读取更改的内容。仅当焦点下次进入该元素时，屏幕阅读器才应读取此内容。有什么方法或途径可以实现这一点吗？

Answer 1

您可以使用

onblur

检查您的元素是否失去焦点。然后更改 aria-label。当用户回来时，他们将获得读出的 aria-label。

我会做这样的事情：

<element id="myElement" onblur="changeAriaLabel" arai-label="old-label">

JS：

changeAriaLabel(event) {
  if (userHasTriggeredAnActionAndTheLabelShouldChange) {
    const myElement = document.querySelector('#myElement'); // you can also get the element from the event, that's probably conidered cleaner code 
    myElement.ariaLabel = 'newLabel' // don't know exactly how to change the aria-label, but I think you know that already
  } else {
    console.log('nothing to change');
  }
}

https://developer.mozilla.org/en-US/docs/Web/Reference/Events/blur