VoiceOver 不会在网站中读取相同的消息

Question

我在 HTML5 中创建了一个聊天，并在 HTML 代码中包含了 WAI-ARIA 角色和属性，以便通知屏幕阅读器用户有关新消息的信息。接下来，我展示我拥有的代码：

<ul id="conversation" class="conversation" aria-relevant="all" role="log" aria-live="polite">
  <li role="listitem">One element</li>
  <li role="listitem">Two element</li>
</ul>

屏幕阅读器，例如：NVDA、JAWS 或 Talkback 可以毫无问题地阅读新消息。但是，VoiceOver 不能很好地阅读它们。大多数消息由 VoiceOver 阅读；但是，VoiceOver 不会读取相等的消息。例如，如果另一个li 元素被添加到ul 并且这个li 元素包含文本'一个元素'，与第一个元素相同的文本，屏幕阅读器不会读取它。

不知道是代码问题还是与 VoiceOver 相关的问题。你有什么建议可以解决吗？

Answer 1

这是 VO 的一个众所周知的问题。我这样做的方法是有两个区域，然后在两个区域之间循环删除其中一个内容，同时向另一个区域添加新内容，然后翻转此行为。这可确保始终在所有屏幕阅读器上阅读内容。

还有一件事：如果您使用这种技术，您将需要 aria-relevant="additions" 以确保不读取删除的内容。