📦 无障碍扫描仪

Accessibility Scanner 扫描 Web 应用是否符合 WCAG 2.2，包括屏幕阅读器兼容、键盘导航、颜色对比、ARIA 使用、语义 HTML 与焦点管理。用于无障碍审计、合规评审或提升包容性设计。

用法 “扫描我的应用无障碍问题” “检查这些页面的 WCAG 合规” “审计我组件的 ARIA 使用” “评审键盘导航”

工作原理

• 静态分析

扫描源码常见 a11y 问题： # 查找无 alt 的图片 grep -rn '

• WCAG 2.2 清单

Level A（必须） • 所有图片有 alt（1.1.1） • 所有输入有标签（1.3.1） • 颜色非唯一信息手段（1.4.1） • 所有功能可键盘操作（2.1.1） • 无键盘陷阱（2.1.2） • 页面有标题（2.4.2） • 链接文本清晰（2.4.4）

Level AA（应有） • 文本对比度 ≥4.5:1（1.4.3） • 文本可放大至 200% 不失真（1.4.4） • 跳过导航链接（2.4.1） • 焦点可见（2.4.7） • 导航一致（3.2.3） • 错误提示（3.3.1）

Level AAA（建议） • 对比度 ≥7:1（1.4.6） • 媒体配手语（1.2.6）

• 组件级审计

对每个可交互组件： • 正确 ARIA 角色与状态 • 焦点管理（模态、下拉、标签） • 键盘交互符合 WAI-ARIA 实践 • 动态内容屏幕阅读器播报 • 触控目标 ≥44×44 px

• 自动化测试集成

推荐工具： @axe-core/playwright 或 @axe-core/react 接入 CI eslint-plugin-jsx-a11y 静态检查 Lighthouse 无障碍审计 NVDA / VoiceOver 手工清单

输出

无障碍审计报告

WCAG 目标： 2.2 Level AA 扫描页面： 12 | 组件： 45

合规得分：72/100

🔴 严重（5）

• 8 页共 13 张图片缺失 alt
• 自定义下拉无键盘导航
• 模态未捕获焦点（Tab 逃出背景）
• 3 个输入无标签关联
• 2 个按钮颜色对比失败（3.2:1，需 4.5:1）

🟡 警告（8）

• 无跳过导航链接
• 4 个可交互元素焦点指示不可见
• 设置表单 Tab 顺序逻辑错误 …

✅ 通过

• 页面结构使用语义 HTML • 存在 ARIA 地标（main、nav、footer） • 标题层级正确（单一 h1，顺序嵌套） • 表单错误信息与输入关联