无障碍(Accessibility)不是“加分项”,而是让更多用户顺利完成任务的基本质量门槛。下面这份清单按“设计评审→交互验收→开发自测→持续监测”的节奏整理,覆盖颜色对比度、字号与触控目标、键盘可达性与焦点顺序、语义结构、表单提示与错误反馈、读屏体验等常见问题点。每个工具都给出链接与一句话用途,方便你在不同阶段快速选型并把问题落到可执行的修复项上。
Lighthouse(Chrome DevTools)
工具地址:
https://developer.chrome.com/docs/lighthouse/
免费商用:浏览器内置的无障碍与性能审计入口,适合快速扫一遍对比度、ARIA 使用、语义结构与常见可达性问题,并作为基线指标跟踪。
axe DevTools
工具地址:
https://www.deque.com/axe/devtools/
需看协议:业内常用的无障碍检测引擎与插件,规则覆盖面广,报告可直接定位到 DOM 节点与修复建议,适合设计/前端一起复核。
WAVE Web Accessibility Evaluation Tool
工具地址:
https://wave.webaim.org/
需看协议:将页面问题以可视化标注叠在界面上,特别适合做“哪里不对劲”的快速沟通:缺失标签、对比度、结构层级等一眼能懂。
Accessibility Insights
工具地址:
https://accessibilityinsights.io/
免费商用:微软开源工具,提供快速检查 + 按步骤的引导式评估(含键盘路径与常见 WCAG 要点),适合做更系统的验收。
Pa11y
工具地址:
https://pa11y.org/
免费商用:命令行/CI 友好的无障碍自动化检测工具,适合把“最低可达性门槛”做成流水线闸口,避免回归。
tota11y
工具地址:
https://khan.github.io/tota11y/
免费商用:可嵌入页面的可视化检查面板,适合在预览环境里给产品/设计演示问题点(对比度、标题层级、图片替代文本等)。
Color Contrast Analyzer(TPGi)
工具地址:
https://www.tpgi.com/color-contrast-checker/
需看协议:桌面端取色并计算对比度,适合做组件库/设计系统的颜色验收;也可用来复核 hover/禁用/提示态的可读性。
WebAIM Contrast Checker
工具地址:
https://webaim.org/resources/contrastchecker/
需看协议:轻量在线对比度计算器,适合在设计评审时快速给出“这组颜色是否过线”的明确结论(AA/AAA)。
Stark
工具地址:
https://www.getstark.co/
需看协议:面向设计工具的无障碍工作流(对比度、色盲模拟、触控目标等),适合把检查前移到设计阶段并形成可复用规范。
NVDA(屏幕阅读器)
工具地址:
https://www.nvaccess.org/
免费商用:Windows 上常用的读屏工具之一,用它做一次“从登录到下单/提交表单”的完整键盘+读屏走查,能迅速暴露语义与焦点问题。
VoiceOver(macOS/iOS)
工具地址:
https://support.apple.com/zh-cn/guide/voiceover/welcome/mac
需看协议:苹果系统自带读屏方案,移动端体验差异很大;建议用它复核按钮命名、列表朗读顺序、表单提示与弹窗可达性。
ARIA Authoring Practices Guide(APG)
工具地址:
https://www.w3.org/WAI/ARIA/apg/
需看协议:不是检测工具,但它是“怎么做才对”的权威参考;做组件库时对照 APG 能少走很多弯路(尤其是菜单、对话框、组合框等)。
WCAG Quick Reference
工具地址:
https://www.w3.org/WAI/WCAG22/quickref/
需看协议:把标准按可筛选条目展开,适合把“问题→对应成功准则→验收口径”串起来,避免团队各说各话。
Funkify(无障碍障碍模拟)
工具地址:
https://www.funkify.org/
需看协议:用模拟方式帮助团队理解不同障碍情境下的真实体验(阅读、注意力、认知负荷等),适合作为设计评审的共识工具。