vue.js - 在 Vue 2 的客户端搜索结果中无法正确读取 aria-live 区域的变化

Question

我正在对项目列表构建一个简单的客户端文本搜索，我希望屏幕阅读器在其中读取找到的项目数。例如，如果您的搜索返回两个项目，我希望屏幕阅读器宣布:“找到两个结果”。为了对此进行测试，我使用了 VoiceOver。

我面临的问题是，此消息的发布几乎总是被屏幕阅读器阅读您在元素中键入的文本打断，导致用户(部分)错过消息。

这是 aria-live 区域的标记:

<div aria-live="assertive" aria-relevant="all" class="sr-only border-r">
    <template v-if="searchTerm.length">
      <span v-if="filteredItems.length === 1">
        Found 1 result
      </span>
      <span v-else-if="filteredItems.length > 1">
        Found {{ filteredItems.length }} results
      </span>
      <span v-else>No searchresults</span>
    </template>
  </div>

我已经尝试使用 aria-role=status 来实现它，这给了我相同的结果。我还通过输入去抖实现了同样的事情。这只会让问题变得不那么严重，因为屏幕阅读器有更多的时间来阅读输入的文本。

那么我如何以始终完整地宣布消息的方式实现这一点？

有关完整代码示例，请参阅此代码笔: https://codepen.io/chrisdh/pen/BaZyXYz

Answer 1

我确实经历过 VoiceOver 自己中断(而 NVDA 倾向于缓冲公告，这会带来其他问题)。可以说 VO 打断了自己的断言消息是 Apple 的错误。 (我想 VO 也将击键通知视为自信!)

我倾向于建议您接受/容忍这种行为。这不违反 WCAG，因为中断是由用户自己的操作(在搜索字段中键入)“引起”的。您的实时区域适本地放在一起。

我建议您将结果数放在最开始，即“找到 X 个结果”而不是“找到 X 个结果”，因为这样重要的事情会先公布，即使其余的被打断或中断.

如果您想超越 WCAG 准则以改进用户体验，您可以考虑使用替代音频源来宣布结果计数，例如使用(标准)网络语音 API。我还没有真正试验过 VoiceOver 和网络语音如何协同工作。您最终可能会收到重叠的公告，这可能会更糟，尽管您可以在某种程度上安排时间安排。