Vue2+Vuetify复选框空格键操作无屏幕阅读器反馈问题求助

核心修复思路 #

1. 强制同步原生input的checked状态

在复选框状态变更时，手动同步原生<input>的状态，确保屏幕阅读器能读取到最新值：

<template>
  <v-checkbox v-model="checked" ref="checkbox" @change="syncNativeInput"></v-checkbox>
</template>
<script>
export default {
  data() {
    return { checked: false }
  },
  methods: {
    syncNativeInput(newValue) {
      const inputEl = this.$refs.checkbox.$el.querySelector('input[type="checkbox"]')
      if (inputEl) {
        inputEl.checked = newValue
        // 触发原生change事件，确保屏幕阅读器感知状态变化
        inputEl.dispatchEvent(new Event('change'))
      }
    }
  }
}
</script>

2. 修正键盘事件处理逻辑

扩展Vuetify的v-checkbox组件，重写空格键的处理逻辑，确保键盘操作时同步原生input状态：

import { VCheckbox } from 'vuetify/lib'

export default {
  extends: VCheckbox,
  methods: {
    onKeyDown(e) {
      super.onKeyDown(e)
      if (e.key === ' ') {
        const inputEl = this.$el.querySelector('input[type="checkbox"]')
        if (inputEl) {
          inputEl.checked = this.value
          inputEl.dispatchEvent(new Event('change'))
        }
      }
    }
  }
}

3. 移除自定义ARIA属性

现代屏幕阅读器优先读取原生表单元素语义，移除input上的role="checkbox"和aria-checked属性，让浏览器原生处理：

// 自定义指令自动移除冗余属性
Vue.directive('fix-checkbox-aria', {
  inserted(el) {
    const inputEl = el.querySelector('input[type="checkbox"]')
    if (inputEl) {
      inputEl.removeAttribute('role')
      inputEl.removeAttribute('aria-checked')
    }
  },
  update(el) {
    const inputEl = el.querySelector('input[type="checkbox"]')
    if (inputEl) {
      inputEl.removeAttribute('role')
      inputEl.removeAttribute('aria-checked')
    }
  }
})

使用方式：<v-checkbox v-fix-checkbox-aria v-model="checked"></v-checkbox>

问题根源解析 #

Vuetify2的v-checkbox在处理键盘空格键操作时，仅更新了组件内部状态和视觉样式，未同步更新原生<input>的checked属性。而现代屏幕阅读器会优先读取原生表单元素的状态，而非ARIA属性，因此键盘操作时阅读器无法感知状态变化；鼠标点击时组件会正确触发原生input的状态同步，所以表现正常。

Vuetify3的修复逻辑大概率是优化了组件事件处理流程，确保键盘操作时原生input状态与组件状态完全同步，同时调整了ARIA属性的使用策略，优先保留原生语义。

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