vscode本身无“无障碍检查快捷键”,web accessibility插件仅在保存文件(ctrl+s/cmd+s)后自动扫描,不响应命令面板搜索或右键菜单;问题需在“问题面板”(ctrl+shift+m)中查看并跳转,且仅支持静态html/react/vue文件,无法检测动态dom、shadow dom或构建产物。

VSCode 本身没有“无障碍检查快捷键”,所有快捷键都只是触发插件行为或跳转到问题位置,真正在意的不是按什么键,而是按完之后有没有对应动作、有没有上下文支撑。
Web Accessibility 插件不响应快捷键,只响应保存
robcohen 的 Web Accessibility 插件默认不绑定任何快捷键,它只在你按下 Cmd+S(macOS)或 Ctrl+S(Windows/Linux)保存文件后才启动扫描。这不是缺陷,是设计选择:避免编辑过程中频繁中断、误报动态内容。
- 如果你试图用
Cmd+Shift+P搜索 “run accessibility check”,结果为空——插件没提供这个命令 - 右键菜单里也没有 “Run a11y scan” 选项,只有 “Analyze with axe”(来自另一个插件)
- 语言模式必须正确:右下角显示
HTML、JavaScript React或Vue,否则插件完全静默 - 它不扫描 JS 动态插入的 DOM,比如
document.createElement('button')后没加aria-label,插件根本看不到
真正能用快捷键跳转的,是“问题面板”里的 a11y 报告
一旦插件完成扫描(保存后),所有检测出的问题会出现在 VSCode 内置的“问题”面板里。这时快捷键才有意义:
-
Cmd+Shift+M(macOS)或Ctrl+Shift+M(Windows/Linux):直接打开问题面板 -
Cmd+.(macOS)或Ctrl+.(Windows/Linux):光标在带波浪线的代码行上时,唤出快速修复菜单(Quick Fix),但仅限部分规则,如自动补alt属性——不是所有 WCAG 问题都支持 - 点击问题列表中的条目,或按
Enter,可直接跳转到对应源码行;但注意:如果该问题来自内联 JS(如 JSX 中的<img src="x">),跳转可能不准,因 HTMLHint 和 Web Accessibility 对 JSX 解析能力不同
axe DevTools for VS Code 提供手动触发入口,但不靠快捷键
这个插件确实支持主动扫描,但它走的是右键菜单路径,而非快捷键绑定:
- 右键任意
.html文件 → 选择Analyze with axe,它会启动本地服务并加载页面(含内联脚本) - 扫描完成后,报告里点
Show code可跳转,但不会自动修复,也不会映射到 JSX/TSX 组件内部的模板片段 - 它无法处理
fetch渲染的内容、iframe 跨域内容、或 Shadow DOM 内部结构——这些必须靠浏览器端的 axe DevTools 扩展来补全 - 别对构建产物(如
dist/index.html)运行它:JS 已压缩、路径已哈希、DOM 结构失真,结果不可信
别指望快捷键替代浏览器验证
所有 VSCode 端的 a11y 检查都是静态的、预编译阶段的守门员,它们解决不了三类关键问题:
- 焦点顺序是否符合视觉流(
tabindex乱序、JS 干预 focus) - 屏幕阅读器实际朗读效果(
aria-live区域更新是否被读出、role是否被正确识别) - 颜色对比度是否在真实设备光照下达标(插件只验 CSS 值,不测物理像素比)
这些必须回到 Chrome 或 Edge,打开开发者工具 → Lighthouse → 选中 “Accessibility” 跑完整审计,或安装 axe DevTools 浏览器扩展手动检查。VSCode 的作用,是把 WCAG 4.1.2、1.1.1 这类结构问题卡在写代码那一刻,而不是等测试阶段才发现按钮缺 aria-label。











