使用React时，在NVDA中读取多个aria-live元素

Question

在我的反应应用程序中，我注意到NVDA中的问题，我在aria-live元素中的添加被多次读出。我只在react中注意到这个问题，并且无法在纯JavaScript中重现它。

我将代码分解为最小的可重复项目。使用Firefox 59.0.3中的NVDA 2018.1，您可以看到NVDA读取了6次更改，每个变量一次。

https://codesandbox.io/s/lx8jykqprz

当您按go时，预期的行为是它应该读取新计数器一次。但是，它被读出6次。如果您更改${this.state.counter}变量的数量，您将看到它被读出的次数已更改。

还有其他人遇到过这个问题吗？如果是这样，你是如何解决它的？

==============

修改： 正如我在接受回答的评论中所述：

我注意到的是，在我的例子中，react渲染了6个文本节点，每个计数器变量一个。这与aria-atomic标签结合使用，迫使变量被多次读取。

通过将其更改为${this.state.counter}${this.state.counter}${this.state.counter}${this.state.counter}${this.state.counter}${this.state.counter}，这可以解决问题，因为它呈现为单个文本节点，因此只会读出一次更改。

Answer 1

您正在使用aria-atomic=true来表示在任何更改时随时读取整个块。默认值为false，因此它只读取已更改的文本。当我使用false运行您的示例时，它可以正常工作。当我在Internet Explorer上运行您的原始代码时，它可以正常工作。当我在chrome（aria-atomic=true）上运行原始文件时，情况会变得更糟。在查看语音查看器时，这是我在chrome上看到（和听到）的内容：

000000 
000000 
100000 
100000 
100000 
110000 
110000 
110000 
111000 
111000 
111000 
111100 
111100 
111100 
111110 
111110 
111110 
111111

这可能会让您更好地了解正在更新和阅读的内容。对于实时区域，更改不会合并在一起并宣布一次。您所做的每一项更改都将排队等候发言。

如果我在Chrome上将aria-atomic更改为false，我会听到：

1
1 
1 
1
1 
1 
1
1 
1 
1
1 
1 
1
1 
1 
1
1 
1 

一般来说，aria-live地区的效果非常好。我很确定您确切地知道正在更新的内容。