问:WAVE 和 Lighthouse 谁更适合新手?
如果你是第一次查网页无障碍,我建议先用 WAVE。原因不是它规则最多,而是它把问题直接贴在页面上:哪里缺 alt、哪里对比度不够、哪个表单没标签,你一眼能看到。新手最怕报告抽象,WAVE 在这点上很友好。
Lighthouse 更像综合体检,性能、SEO、最佳实践、可访问性一起给分。它适合做基线,但不适合拿来指导每一个修改。你看到 91 分,不代表没问题;看到 78 分,也要点进具体审计项看。
wave攻略最常见的误区,是把 WAVE 当成唯一答案。它确实直观,特别适合页面审查和沟通,但和 Lighthouse、axe、Accessibility Insights 放在一起看,分工会清楚很多,也更不容易漏问题。
如果你是第一次查网页无障碍,我建议先用 WAVE。原因不是它规则最多,而是它把问题直接贴在页面上:哪里缺 alt、哪里对比度不够、哪个表单没标签,你一眼能看到。新手最怕报告抽象,WAVE 在这点上很友好。
Lighthouse 更像综合体检,性能、SEO、最佳实践、可访问性一起给分。它适合做基线,但不适合拿来指导每一个修改。你看到 91 分,不代表没问题;看到 78 分,也要点进具体审计项看。
axe DevTools 更偏开发者。它的规则解释、节点定位、影响级别写得细,适合前端在调试阶段逐条修。很多团队把 axe 接进 CI,用来阻止明显问题进入主分支。
WAVE 更适合跨角色沟通。设计、运营、产品看到页面上的红黄图标,也能理解问题位置。我做评审时常用 WAVE 截图开会,用 axe 补充技术细节。一个负责“看得懂”,一个负责“修得准”。
Accessibility Insights 的优势在于流程化。它不只是扫页面,还会引导你做 FastPass、Tab stops、Assessment 等检查。尤其是键盘焦点顺序,WAVE 不能完全替你判断,Accessibility Insights 会更贴近真实操作。
缺点是上手比 WAVE 重一点。小站点、内容页、落地页,用 WAVE 加人工键盘测试就够;复杂后台、表单系统、组件库,我会把 Accessibility Insights 加进验收流程。
普通文本对比度,WAVE 可以快速抓出不少问题。WCAG 里常见要求是普通文本至少 4.5:1,大号文本至少 3:1。WAVE 会标出 Contrast Errors,这对设计返工很有帮助。
但要注意,渐变背景、图片背景、悬浮态、禁用态、动态主题,工具可能判断不完整。遇到品牌色压线的情况,最好用专门的 contrast checker 再测一次,并把字号、字重、背景色写清楚。
内容站:WAVE 扫页面,重点看 alt、标题层级、链接文字。营销页:WAVE 加对比度工具,重点看按钮和浅色文案。后台系统:axe 加 Accessibility Insights,重点看表单、弹窗、键盘操作。
别追求工具越多越专业。我的经验是,一个页面如果同时跑 4 个工具,最后大家会忙着解释报告差异,反而没人修问题。固定两到三个工具,配一份团队规则,比临时乱扫有效。