用途:帮助团队按 WCAG 标准测试并改进网页无障碍性,覆盖 ARIA、键盘导航、屏幕阅读器、色彩对比和自动化校验。
核心原则与等级:遵循 POUR,即信息可感知、界面可操作、信息与操作可理解、内容足够健壮以兼容辅助技术。WCAG 2.1 分为 A(最低,如替代文本、键盘访问、标签)、AA(多数站点基线,如 4.5:1 对比度、焦点指示、跳转链接)、AAA(最高,如 7:1 对比度,并非所有内容都能达到)。
自动化测试:可用 Playwright 配合 @axe-core/playwright,按 wcag2a、wcag2aa、wcag21a、wcag21aa 等标签扫描,或指定 color-contrast、image-alt、label、aria-required-attr 等规则,并支持 include/exclude 限定范围。也可用 Cypress 配合 cypress-axe 注入并执行 checkA11y。安装命令为 npm install --save-dev @axe-core/playwright。
手工测试:包括键盘导航(Tab 遍历、Enter 提交、Escape 关闭弹窗、跳转链接)、焦点管理(可见焦点指示、模态框焦点陷阱)、屏幕阅读器(ARIA 标签、地标区域、图片替代文本、aria-live 动态播报)、色彩对比(含高对比/强制色彩模式)以及表单无障碍(标签关联、错误提示、aria-invalid、aria-describedby、必填提示)。
常用 ARIA 模式:按钮、对话框/模态框、选项卡、组合框/自动补全,均给出对应角色与属性要求。
检查清单:覆盖页面标题与语言、标题层级、跳转链接、地标;图片替代文本;表单标签与错误;键盘可达性与焦点顺序;色彩对比;动态内容播报。
最佳实践:优先使用语义化 HTML,谨慎使用 ARIA,保证全部功能可键盘操作,并用 NVDA、JAWS、VoiceOver 等真实屏幕阅读器验证。
限制:自动化工具只能发现部分问题,无法替代人工与真实辅助技术测试;具体收费、平台与效果资料暂未提供。