Web Accessibility插件可实现实时无障碍检测与修复：安装后启用，确认语言模式，保存触发扫描，问题面板查看提示，配置rules自定义规则，并通过codeActionsOnSave实现保存自动修复。
如果您在使用 vscode 开发网页应用时希望实时检测和修复无障碍（a11y）问题，则 web accessibility 插件可提供内联提示、自动检查与合规建议。以下是启用并有效使用该插件的具体操作路径：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装 Web Accessibility 插件
该插件需通过 VSCode 扩展市场获取并启用，确保其与当前编辑器版本兼容且能加载到 HTML、JSX、Vue 等支持的文件类型中。
1、打开 VSCode，点击左侧活动栏中的扩展图标（或按 Cmd+Shift+X）。
2、在搜索框中输入 Web Accessibility，找到作者为 robcohen 的插件。
3、点击“安装”按钮，等待状态变为“已启用”。
二、启用实时无障碍扫描
插件默认在打开支持的文件时自动激活检查功能，但需确认其语言模式识别正确，并触发内联诊断标记。
2、确保右下角状态栏显示的语言模式为 HTML 或 JavaScript React；若非此状态，点击该区域手动切换。
3、保存文件（Cmd+S），插件将立即分析 DOM 结构与 ARIA 属性使用情况，并在问题行左侧显示波浪线与警告图标。
三、查看并响应无障碍提示
插件会在编辑器右侧问题面板中聚合所有检测项，同时支持鼠标悬停查看具体违规原因及 WCAG 准则编号。
1、点击左侧活动栏的“问题”图标（或按 Cmd+Shift+M）打开问题面板。
2、在列表中定位类型为 Accessibility 的条目，例如 [aria-label] is missing on button element。
3、将鼠标悬停于代码中带波浪线的元素上，弹出提示框中会显示修复建议与对应 WCAG 2.1 成功标准编号，如 WCAG 4.1.2。
四、配置自定义检查规则
插件支持通过 workspace 或 user 设置调整检测强度与忽略项，适用于不同项目对无障碍合规等级的实际要求。
1、按下 Cmd+, 打开设置界面，在搜索框中输入 web-accessibility.rules。
2、点击“在 settings.json 中编辑”，添加如下配置块：
"web-accessibility.rules": {"region": false,"heading-order": true}
3、保存文件后，插件将跳过 region 检查，但强制校验标题层级嵌套是否符合逻辑顺序。
五、集成到保存时自动修复流程
借助 VSCode 的保存时格式化机制，可联动插件对部分常见无障碍缺陷执行自动补全，减少手动干预频次。
1、进入设置，搜索 editor.formatOnSave，勾选启用。
2、搜索 editor.defaultFormatter，将 HTML 类型的默认格式化工具设为 esbenp.prettier-vscode（需已安装）。
3、在项目根目录创建 .vscode/settings.json，加入以下内容：
{"editor.codeActionsOnSave": {"source.fixAll.web-accessibility": true}}
