Vue 2의 클라이언트 측 검색 결과에서 aria-live 영역의 변경 내용을 제대로 읽지 않음

Vue 2의 클라이언트 측 검색 결과에서 aria-live 영역의 변경 내용을 제대로 읽지 않음

아이템 리스트에서 간단한 클라이언트 측 텍스트 검색을 작성하고 있으며, 스크린 리더가 아이템의 수를 읽도록 하고 있습니다.예를 들어, 검색에서 두 개의 항목이 반환되면 스크린 리더가 "Two results found" (두 개의 결과가 검색되었습니다)라고 알립니다.이를 테스트하기 위해 VoiceOver를 사용하고 있습니다.

제가 직면한 문제는 이 메시지의 알림이 거의 항상 스크린리더에 의해 중단되어 사용자가 입력 중인 텍스트를 읽고 있기 때문에 (일부적으로) 메시지를 놓치게 된다는 것입니다.

다음은 아리아 라이브 영역의 마크업입니다.

<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로 실장해 보았습니다만, 같은 결과가 되었습니다.입력에 대한 데바운스도 같은 것을 실장했습니다.이렇게 하면 입력된 텍스트를 읽을 수 있는 시간이 조금 더 길기 때문에 문제가 덜 심각해질 뿐입니다.

그러면 메시지가 항상 완전히 방송되도록 하려면 어떻게 해야 할까요?

완전한 코드의 예에 대해서는, 다음의 코데펜을 참조해 주세요.

저는 VoiceOver가 중단되는 것을 경험한 적이 있습니다(NVDA가 발표를 버퍼링하는 경향이 있기 때문에 다른 문제가 발생합니다).VO가 자신의 단언적인 메시지를 방해하는 것은 Apple의 버그라고 말할 수 있습니다.(VO도 키 입력 발표를 단언적으로 취급한다고 생각합니다!)

저는 당신이 이 행동을 받아들이도록 권하고 싶습니다.WCAG 위반은 아닙니다.왜냐하면 인터럽트는 사용자 자신의 액션(검색 필드에 타이핑)에 의해 '발생'되기 때문입니다.라이브 리젼은 적절히 정리되어 있습니다.

결과의 수는, 「X개의 결과를 발견했다」가 아니고, 「X개의 결과를 찾았다」라고 하는 첫머리에 넣는 것을 추천합니다.그렇게 하면, 나머지가 중단되거나 끊어져도, 중요한 것이 먼저 발표되기 때문입니다.

WCAG 가이드라인을 넘어 UX를 개선하려면 (표준) Web 음성 API 등 대체 오디오소스를 사용하여 결과 카운트를 방송하는 것을 검토해 주십시오.Voice Over와 Web Speech가 어떻게 연동되는지 실제로 실험해 본 적이 없습니다.시간이 어느 정도 맞춰질 수 있지만, 중복되는 발표가 나올 수도 있고, 더 나쁜 소식이 나올 수도 있습니다.

언급URL : https://stackoverflow.com/questions/68935895/changes-in-aria-live-area-not-read-properly-on-client-side-search-results-in-vue