使用 React 时，aria-live 元素在 NVDA 中被多次读取
aria-live element being read multiple in NVDA when using React
在我的 React 应用程序中，我注意到 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} 这解决了问题，因为它呈现为单个文本节点，因此更改仅被读出一次。
您正在使用 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 区域运行良好。我很确定您听到的正是正在更新的内容。
在我的 React 应用程序中，我注意到 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} 这解决了问题，因为它呈现为单个文本节点，因此更改仅被读出一次。
您正在使用 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 区域运行良好。我很确定您听到的正是正在更新的内容。