Reactjs 使用React时，NVDA中的aria live元素被多次读取

在我的react应用程序中，我注意到NVDA中的一个问题，我在

aria live

元素中添加的内容被多次读取。我只在react中注意到这个问题，无法在普通JavaScript中重现它

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

当您按下go键时，预期的行为是它应该读取一次新计数器。但是，它被读出6次。如果更改

${this.state.counter}

变量的数量，您将看到它的读取次数发生了更改

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

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

编辑： 正如我在接受答复的评论中所述：

我注意到，在我的示例中，react呈现了6个文本节点，每个计数器变量对应一个。这与

aria-atomic

标记相结合，迫使变量被多次读取

---

通过将其更改为

${this.state.counter}${this.state.counter}${this.state.counter}${this.state.counter}${this.state.counter}

这修复了问题，因为它呈现到单个文本节点，因此，更改只被读取一次。

您使用的是

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

区域工作得很好。我敢肯定你听到的正是更新的内容。

谢谢，你让我走上了正确的轨道。对于我正在做的事情，我需要

aria-atomic

成为现实。我注意到，在我的示例中，react呈现了6个文本节点，每个计数器变量对应一个。通过将其更改为

`${this.state.counter}${this.state.counter}${this.state.counter}${this.state.counter}${this.state.counter}`

这修复了问题，因为它被渲染到单个文本节点，因此更改只被读取一次。很高兴它有所帮助。我并不是想暗示不应该使用

aria-atomic

。它非常适用于

您还有10分钟的时间

更新10分钟，您希望阅读整个句子，而不仅仅是“10”的情况。