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

Question

在我的 React 应用程序中，我注意到 NVDA 中存在一个问题，即我在 aria-live 元素中添加的内容被多次读出。我只在 React 中注意到这个问题，无法用纯 JavaScript 重现它。

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

https://codesandbox.io/s/lx8jykqprz

当您按下“开始”键时，预期的行为是它应该读取一次新计数器。然而，它被读出了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 ，它表示只要有任何变化就读取整个 block 。默认值为 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 区域运行得很好。我很确定您确实听到了正在更新的内容。