Vue 2客户端搜索时aria-live区域变更未被屏幕阅读器正常播报问题

VoiceOver 默认会实时播报输入框键入的字符，和 aria-live 区域的播报任务抢占语音通道，单纯的防抖只是延后了结果更新时机，只要更新时机和键入播报重叠就会被打断，可通过以下方案解决：

• 调整 aria-live 区域属性，补全缺失的关键配置
  原有代码缺少 aria-atomic="true" 属性，这个属性会强制屏幕阅读器每次更新时读取整个 live 区域的完整内容，而非仅读取变化的片段；同时把 aria-relevant 改为 text 减少不必要的播报触发。优化后的代码如下：

  <div 
    aria-live="assertive" 
    aria-atomic="true" 
    aria-relevant="text" 
    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 search results</span>
    </template>
  </div>
  

• 优化更新时机，在防抖基础上追加延时
  原有防抖仅避免了输入过程中频繁更新结果，但是防抖结束后立刻更新内容，仍可能和VoiceOver对最后一个键入字符的播报重叠。可以在防抖回调中再加150~200ms的延时，等键入播报完成后再更新结果计数，例如：

  // 原有防抖逻辑
  const debouncedSearch = debounce(() => {
    // 计算filteredItems逻辑
    this.filteredItems = getFilteredItems(this.searchTerm)
    // 追加延时再更新播报内容
    setTimeout(() => {
      this.shouldAnnounce = true // 用变量控制aria-live区域的内容渲染
    }, 180)
  }, 300)
  

• 兜底方案：动态创建播报节点主动触发
  如果上述方案仍有兼容问题，可以放弃模板中的固定aria-live区域，改为计算完结果后动态创建临时播报节点，VoiceOver会优先识别新增的live区域内容，避免被之前的播报任务打断。Vue 2 中实现代码如下：

  methods: {
    // 在搜索完成、得到filteredItems后调用该方法
    announceSearchResult(count) {
      // 清除之前的临时播报节点
      const oldNode = document.getElementById('search-result-announce')
      if (oldNode) oldNode.remove()
  
      // 创建新的播报节点
      const announceNode = document.createElement('div')
      announceNode.id = 'search-result-announce'
      announceNode.className = 'sr-only'
      announceNode.setAttribute('aria-live', 'assertive')
      announceNode.setAttribute('aria-atomic', 'true')
  
      // 填充播报文本
      if (count === 1) {
        announceNode.textContent = 'Found 1 result'
      } else if (count > 1) {
        announceNode.textContent = `Found ${count} results`
      } else {
        announceNode.textContent = 'No search results'
      }
  
      document.body.appendChild(announceNode)
      // 1秒后移除节点，避免重复触发播报
      setTimeout(() => announceNode.remove(), 1000)
    }
  }
  

内容的提问来源于stack exchange，提问作者Chrisdh