Vuetify 3中v-select打开后屏幕阅读器无法遍历选项问题求助

Vuetify 3 的 v-select 组件是遵循 WCAG 无障碍标准开发的，本身具备基础无障碍支持，无法遍历选项更可能是配置、环境或版本问题，而非组件完全不具备可访问性。以下是具体排查方向：

1. 屏幕阅读器与浏览器兼容性问题 #

• 不同屏幕阅读器（NVDA、VoiceOver、JAWS）和浏览器的组合存在适配差异：
  • VoiceOver 在 Safari 下的表现优于其他浏览器；NVDA 更适配 Firefox/Chrome
  • 确认当前使用的组合是否属于 Vuetify 官方推荐的无障碍测试环境
• 检查屏幕阅读器版本，旧版本可能对新组件的 ARIA 属性解析存在缺陷，建议升级到最新稳定版

2. v-select 配置缺失或错误 #

• 必须为组件添加无障碍标识：
  • 优先使用 label 属性，或通过 aria-label/aria-labelledby 指定组件用途，否则屏幕阅读器无法识别组件功能
    示例代码：

    <!-- 基础带label写法 -->
    <v-select label="选择分类" :items="categoryList" />
    <!-- 自定义无障碍标签写法 -->
    <v-select aria-label="选择偏好设置" :items="preferenceList" />
    

  • 若使用自定义选项模板（item-template），需确保每个选项元素添加了 role="option" 属性，避免破坏原生无障碍结构
• 检查组件状态：若设置了 disabled 或 readonly，组件会被屏幕阅读器排除在可聚焦元素外；启用 filterable 时，需确保筛选后的选项仍能被正确识别

3. Vuetify 版本 Bug #

• 早期 Vuetify 3 版本存在一些无障碍相关的修复漏洞，比如下拉框展开后选项未被正确标记为可遍历元素、ARIA 属性缺失等
• 尝试升级到最新稳定版，查看官方更新日志中是否包含无障碍相关的修复条目

4. 全局页面设置干扰 #

• 检查页面是否有自定义焦点管理脚本，可能覆盖了 v-select 默认的焦点遍历逻辑
• 确认页面根元素的 lang 属性是否正确设置（如 <html lang="zh-CN">），屏幕阅读器依赖语言属性完成内容解析和发音

快速验证步骤 #

1. 用屏幕阅读器聚焦到 v-select 组件，按下回车键或空格键展开下拉框
2. 尝试用上下箭头遍历选项：
   • 若展开后无任何反馈，大概率是下拉框的 ARIA 弹出层属性未正确渲染
   • 若能听到展开提示但无法遍历，检查选项 DOM 结构是否包含 role="option" 和 aria-selected 属性

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