WAVE
可视化 Web 可访问性评估工具
可访问性a11y可视化评估WCAG
WebAIM 提供的 Web 可访问性评估工具，通过浏览器扩展和在线服务，以可视化标注方式在页面上直接标出 a11y 问题与正确实现，特别适合学习与沟通可访问性问题。
WAVE Web 可访问性评估工具技术调研
WAVE（Web Accessibility Evaluation Tool）是 WebAIM 提供的 Web 可访问性评估工具，通过浏览器扩展和在线服务，以可视化标注方式在页面上直接标出 a11y 问题与正确实现，特别适合学习与沟通可访问性问题，而非大规模 CI 自动化。
一、 基本信息
| 维度 | 关键指标 / 描述 |
|---|---|
| 技术标签 | 可访问性 / a11y / 可视化评估 / WCAG |
| 开发商 | WebAIM（犹他州立大学） |
| 官方网站 | https://wave.webaim.org/ |
| 扩展 | Chrome/Firefox/Edge |
| 许可协议 | 免费（扩展与在线版） |
| 生态成熟度 | 高（教育领域广泛使用） |
二、 技术定位与简介
WAVE 在页面叠加图标标注：
- 红色：错误（errors）
- 黄色：警告（alerts）
- 绿色：正确特性（features）
- 紫色：对比度相关（contrast）
- 蓝色：结构信息（ARIA、heading 等）
相比 axe 的列表报告，WAVE 可视化更利于与设计师、产品经理沟通。
三、 快速上手安装说明
- 安装浏览器扩展「WAVE Evaluation Tool」。
- 打开待测页面，点击扩展图标运行评估。
- 或访问 https://wave.webaim.org/ 输入 URL（公开页）。
查看 Summary 面板统计与 Details 逐项说明。
四、 核心特性
- 页面内联标注，直观定位元素。
- 结构（标题层级、地标）可视化。
- 对比度检查。
- 无样式模式（查看线性化阅读顺序）。
- 报告可导出（WAVE API 商业）。
五、 适用场景
适合：a11y 入门教学、设计评审、单页人工抽查、与非技术人员沟通问题。
不适合：CI 自动化门禁（用 axe-core）、大型站点批量扫描、私有需登录页面（在线版受限，用扩展测本地）。
六、 技术亮点
免费；标注直观；WebAIM 权威教育资源；对比度与结构视图独特。
七、 技术局限与边界
- 非 CI 友好。
- 登录页、复杂 SPA 需扩展在本地运行。
- 自动检测覆盖有限，同 axe。
- WAVE API 批量服务商业定价。
- 英文界面为主。
八、 生态地图
axe DevTools、Lighthouse、Accessibility Insights、屏幕阅读器（NVDA/VoiceOver）。
九、 生态集成
开发流程：WAVE 人工抽查 → axe CI 回归；设计稿阶段用对比度检查。
十、 开发与工程化
发布前关键营销页 WAVE 扩展过一遍；问题截图纳入 ticket；与 eslint-plugin-jsx-a11y 互补。
十一、 性能与安全
在线版勿提交含敏感数据的内网 URL；扩展仅分析当前页 DOM。
十二、 技术对比
| 工具 | 输出形式 | CI |
|---|---|---|
| WAVE | 页面标注 | 否 |
| axe | 规则列表 | 是 |
| Lighthouse | 分数+审计 | 是 |
十三、 最佳实践
- 设计师参与 WAVE 评审会议。
- 修复后重新运行对比截图。
- 自动化工单用 axe，沟通用工单附 WAVE 截图。
- 检查标题层级与 landmark 结构。
- 不依赖 WAVE 作为唯一合规证据。
十四、 学习与社区资源
- WebAIM WAVE：https://wave.webaim.org/help
- WebAIM 文章：https://webaim.org/articles/
十五、 总结
WAVE 是 可视化 a11y 调试与沟通的利器，适合人与团队协同时快速「看见」问题；工程化门禁仍应依赖 axe-core 与 E2E 集成。