3

I am building a simple client-side text search on a list of items, where I want the screenreader to read how many items are found. For example if your search return two items, I want the screenreader to announce: "Two results found". To test this I am using VoiceOver.

The issue I am facing is that the announcement of this message is almost always interrupted by the screenreader reading the text your are typing in the element, causing the user to (partially) miss the message.

This is the markup for the aria-live area:

<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>

I have tried implementing this with a aria-role=status, which gave me the same results. I have also implemented the same thing with a debounce on the input. That only makes the issue less severe, because the screenreader has a little bit more time to finish reading the text that's typed.

So how do I implement this in a way that the message is always announced completely?

See this codepen for a full code example: https://codepen.io/chrisdh/pen/BaZyXYz

4

1 回答 1

1

我当然经历过 VoiceOver 会自行中断（而 NVDA 倾向于缓冲公告，这会带来其他问题）。可以公平地说，VO 打断自己的自信信息是 Apple 的错误。（我想 VO 也将击键公告视为自信！）

我倾向于建议您接受/容忍这种行为。这不是 WCAG 违规，因为中断是由用户自己的行为（在搜索字段中键入）“引起”的。您的活动区域已适当组合在一起。

我建议你把结果的数量放在最开始，即“找到 X 个结果”而不是“找到 X 个结果”，因为这样重要的事情就会首先宣布，即使其余的事情被打断或切断。

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

于 2021-08-26T10:38:04.313 回答