aria-live 内容更新时阅读自定义消息答案

【问题标题】：Read customized message when content updates for aria-livearia-live 内容更新时阅读自定义消息
【发布时间】：2020-01-09 04:29:01
【问题描述】：

如果我有一个具有 aria-live='polite' 的元素，但我不希望屏幕阅读器读取更新的内容，而是我提供的自定义消息，这可能吗？

谢谢！

【问题讨论】：

【解决方案1】：

在您不希望发布时将内容添加到实时区域违反了 ARIA live region specification 的设计，因此我鼓励您在继续您在此处执行的任何操作之前仔细考虑这一点，但出于目的在这个问题中，我将只关注技术上什么是可行的，什么是不可行的。

理论上，您可以将aria-hidden="true" 添加到直播区域中您不想公布的内容中。这将防止这部分 DOM 暴露在浏览器中的可访问性树中。同时，视力正常的访问者也可以看到此内容。

另一方面，您可以将内容添加到有视力的用户看不到的实时区域。这将是您描述的“自定义消息”。通常的技术是position the content off-screen using CSS。

【讨论】：

如果我总是希望屏幕阅读器在变量发生更改时读取隐藏字段中的相同消息，但我不想读取更新后的值。最好的方法是什么？例如：
某些值已更新
。如果变量更改，我应该如何强制跨度重新呈现？
您可能需要删除“自定义消息”并通过脚本重新添加。这个元素需要使用 CSS 定位在屏幕外。需要注意的是，我发现要使活动区域正常工作，最好将添加/删除的任何元素作为活动区域的直接子元素。如果您有任何包装 div，可能会导致某些屏幕阅读器无法正常工作。
我正在使用 react 并且我使用 useEffect 来检测变量的变化。每次变量更改时，我都会删除 div 内的 span 并将 span 添加回 div，但屏幕阅读器从不读取任何内容。你有什么建议？如果我不从 div 中删除跨度，屏幕阅读器会阅读我的消息，但我确实需要删除现有消息。我猜可能 remove 和 add 在调用中连续发生，而 aria-live 认为 dom 树之前和之后没有区别？
你能发布一个工作代码示例（例如通过 JSFiddle、Codepen 等）吗？这对解决您的问题非常有帮助。谢谢。
是的，请在此处找到我的代码：codesandbox.io/s/interesting-frost-yprot。我使用了一个计数变量来模拟我的变量的变化。计数改变时如何让它宣布自定义消息？