Changes in aria-live area not read properly on client-side search results in Vue 2

Question

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

Answer 1

I've certainly experienced VoiceOver interrupting itself (whereas NVDA tends to buffer the announcements, which brings other problems). It's fair to say that VO interrupting its own assertive messages is Apple's bug. (I suppose VO treats keystroke announcements as assertive too!)

I'd be inclined to recommend that you accept/tolerate this behavior. It's not a WCAG violation, because the interruptions are 'caused' by the user's own actions (typing in the search field). Your live region is put together appropriately.

I would suggest that you put the number of results at the very start, i.e. "X results found" rather than "found X results", because then the important thing gets announced first, even if the rest is interrupted or cut off.

If you want to go above-and-beyond the WCAG guidelines, to improve UX, you might consider using an alternative audio source to announce the result count, for example with the (standard) web speech API. I haven't really experimented with how VoiceOver and web speech work together. You might end up with overlapping announcements, which may be even worse, although you'd have the ability to choreograph the timing to some extent.