wave攻略:和同类工具怎么选

wave攻略最常见的误区,是把 WAVE 当成唯一答案。它确实直观,特别适合页面审查和沟通,但和 Lighthouse、axe、Accessibility Insights 放在一起看,分工会清楚很多,也更不容易漏问题。

问:WAVE 和 Lighthouse 谁更适合新手?

如果你是第一次查网页无障碍,我建议先用 WAVE。原因不是它规则最多,而是它把问题直接贴在页面上:哪里缺 alt、哪里对比度不够、哪个表单没标签,你一眼能看到。新手最怕报告抽象,WAVE 在这点上很友好。

Lighthouse 更像综合体检,性能、SEO、最佳实践、可访问性一起给分。它适合做基线,但不适合拿来指导每一个修改。你看到 91 分,不代表没问题;看到 78 分,也要点进具体审计项看。

问:WAVE 和 axe DevTools 有什么区别?

axe DevTools 更偏开发者。它的规则解释、节点定位、影响级别写得细,适合前端在调试阶段逐条修。很多团队把 axe 接进 CI,用来阻止明显问题进入主分支。

WAVE 更适合跨角色沟通。设计、运营、产品看到页面上的红黄图标,也能理解问题位置。我做评审时常用 WAVE 截图开会,用 axe 补充技术细节。一个负责“看得懂”,一个负责“修得准”。

想要完整资源?

会员专享,海量内容

立即查看 →

问:Accessibility Insights 值得加进流程吗?

Accessibility Insights 的优势在于流程化。它不只是扫页面,还会引导你做 FastPass、Tab stops、Assessment 等检查。尤其是键盘焦点顺序,WAVE 不能完全替你判断,Accessibility Insights 会更贴近真实操作。

缺点是上手比 WAVE 重一点。小站点、内容页、落地页,用 WAVE 加人工键盘测试就够;复杂后台、表单系统、组件库,我会把 Accessibility Insights 加进验收流程。

问:颜色对比度用 WAVE 够不够?

普通文本对比度,WAVE 可以快速抓出不少问题。WCAG 里常见要求是普通文本至少 4.5:1,大号文本至少 3:1。WAVE 会标出 Contrast Errors,这对设计返工很有帮助。

但要注意,渐变背景、图片背景、悬浮态、禁用态、动态主题,工具可能判断不完整。遇到品牌色压线的情况,最好用专门的 contrast checker 再测一次,并把字号、字重、背景色写清楚。

问:实际工作中怎么组合最省事?

内容站:WAVE 扫页面,重点看 alt、标题层级、链接文字。营销页:WAVE 加对比度工具,重点看按钮和浅色文案。后台系统:axe 加 Accessibility Insights,重点看表单、弹窗、键盘操作。

别追求工具越多越专业。我的经验是,一个页面如果同时跑 4 个工具,最后大家会忙着解释报告差异,反而没人修问题。固定两到三个工具,配一份团队规则,比临时乱扫有效。

常见问题

WAVE 和 axe 检测结果不一样听谁的?
先看问题类型。明确违反 HTML 语义或 WCAG 规则的,按更具体的证据修。警告类问题要人工判断,不要因为某个工具没报就忽略。
做无障碍检测只用 Lighthouse 可以吗?
不建议。Lighthouse 适合快速发现一部分问题,但覆盖有限。至少再用 WAVE 看页面标注,并做一次键盘导航测试。
WAVE 适合批量扫描整站吗?
WAVE 更适合单页可视化检查。整站批量可以考虑 WAVE API、axe 集成或专门的站点审计工具,但仍要抽样人工复核。

获取完整内容

加入会员,海量资源任你看

立即进入 →