网站无障碍审计：WCAG 2.2 实战清单

无障碍（Accessibility，简称 a11y）是让残障用户、临时受限用户（光照下、断臂期）、设备受限用户（小屏、慢网、纯键盘）也能使用网站的设计与工程实践。WCAG 2.2 是 W3C 在 2023 年 10 月发布的最新国际标准，已成为欧盟 EAA、美国 ADA、中国《无障碍环境建设法》引用的事实基线。本文给出一份可落地的审计清单：从语义化 HTML、ARIA、键盘导航、焦点管理、对比度六大基础项，到屏幕阅读器实测、自动化工具选型、法规合规要点，每一项都附操作步骤，帮助前端、设计、QA 三个角色把无障碍从「事后补丁」变成「上线前的常规检查」。

1. 为什么 a11y 不再是「锦上添花」

WHO 数据显示全球约 16 的人有不同程度的残障，中国残障人士超过 8500 万。把这部分用户排除在外不仅是商业损失，也面临法律风险。欧盟 EAA（European Accessibility Act）从 2025 年 6 月强制生效，覆盖电商、银行、电信、出行 App，违规罚款最高数百万欧元。美国 ADA Title III 已让数百家企业被起诉（达美乐、Domino's、Target 都在列）。中国 2023 年 9 月《无障碍环境建设法》出台，政府服务与公共服务网站必须达到 GB/T 37668 标准。即使不出海，国内合规压力也在抬升。

另一方面，无障碍优化本身就是好工程。语义化 HTML 提升 SEO（搜索引擎也是「机器盲人」），键盘可达让 Power User 体验更好，足够大的点击目标对所有触屏用户都友好，清晰的 label 提升表单完成率。Microsoft 与 Google 内部数据都显示：a11y 改进通常能带来 5 到 15 的转化率提升。

2. 语义化 HTML：第一道防线

语义化 HTML 是无障碍的基石。屏幕阅读器、搜索引擎、辅助工具依赖标签语义理解结构。常见踩坑：用 div 模拟按钮（少了 role 与键盘事件）、用 div 嵌套堆出 H1/H2 视觉而不用 h1/h2、用 b 与 i 代替 strong 与 em（前者只是字体加粗倾斜，后者带语义重音）、用 table 做布局（屏幕阅读器会按表格朗读，体验灾难）。

正确实践：每页一个且唯一的 h1，标题层级不跳级（h2 后接 h3 而非直接 h4）；用 nav、main、article、aside、footer 而非全用 div；表单用 label for 关联 input id 或 label 包住 input；图片必有 alt（装饰图用 alt 等于空字符串）；按钮用 button 标签，链接用 a 标签，不要互换；列表用 ul/ol/li；引用用 blockquote。光把这些做对，自动化工具的报告就能从一两百个错误降到二十个以内。

3. ARIA：用对了加分，用错了扣分

ARIA（Accessible Rich Internet Applications）是给原生 HTML 没法表达的复杂控件（弹窗、树、Tab、进度条）补充语义的属性集。第一原则：能用原生 HTML 就不要用 ARIA。button 已带 role=button，再写 role=button 是冗余甚至有害（某些屏幕阅读器会重复朗读）。

必备 ARIA 模式：role=dialog 配合 aria-modal=true 与 aria-labelledby，是模态框的标准做法；aria-expanded 表示折叠状态；aria-current=page 标记当前导航项；aria-live=polite/assertive 让屏幕阅读器播报动态变化（如加载完成、表单错误、Toast）；aria-describedby 关联额外说明文本；aria-hidden=true 隐藏纯装饰元素；aria-label 给无文字按钮（图标按钮）加可访问名。错误用法：在已有 alt 的 img 上再加 aria-label（覆盖 alt 不必要）、在 div 上写 role=button 但忘了加 tabindex 与键盘事件、aria-hidden 加在可聚焦元素上（会让焦点凭空消失）。

4. 键盘导航：每个交互都能用 Tab 完成

键盘可达是 WCAG 的硬指标。审计方法：拿掉鼠标，用 Tab、Shift+Tab、Enter、Space、方向键、Esc 走一遍核心流程。要确保：所有可交互元素都能聚焦（按钮、链接、表单、自定义控件）；Tab 顺序符合阅读顺序（不要靠 tabindex 大正数硬调，会破坏自然顺序，统一用 0 或 -1）；焦点指示器清晰可见（默认 :focus 轮廓不要 outline:none 抹掉，至少替换为 :focus-visible 风格的 ring）。

常见问题：自定义弹窗打开后焦点未移入，关闭后未还回触发按钮（应主动 dialog.focus 与 trigger.focus）；下拉菜单只能鼠标 hover 触发（要支持 Enter 展开、方向键浏览、Esc 关闭）；轮播组件无键盘控制（应支持左右箭头与 Pause）；Skip Link「跳到主内容」缺失（页面顶部第一个 Tab 应跳出导航直接到 main，每个长导航站点必备）。WCAG 2.2 新增「Focus Not Obscured」标准：聚焦元素不能被 sticky 头部、Cookie 横幅完全遮挡，需要 scroll-padding 或 scroll-margin 兜底。

5. 对比度与视觉可达：色彩之外的细节

WCAG AA 要求：正文文字与背景对比度至少 4.5:1，大字（18pt 普通 / 14pt 粗体）至少 3:1；非文本（图标、表单边框、聚焦指示器、按钮边界）至少 3:1。AAA 等级正文 7:1、大字 4.5:1。常见踩坑：浅蓝（#7CB9E8）放白底只有 2.4:1、浅灰提示文字（#999 on #FFF）只有 2.85:1、品牌色按钮文字（白字 + 浅绿底）经常不达标。用对比度检查工具把每一对前景背景色都验证一次。

色彩不是唯一信息载体：表单错误不能仅靠红色边框，要同时加图标 + 文字提示；图表不能仅靠颜色区分类别，应增加形状、纹理或直接标注；链接不能只靠颜色与正文区分，要加下划线（或非常显著的对比度差）。WCAG 2.2 新增 Target Size Minimum：所有点击目标至少 24 x 24 CSS 像素（移动端建议 44 x 44）。链接文字要短到合适但要避免「点击这里」「更多」这种无上下文的文字（屏幕阅读器列出全站链接时一片「点击这里」无法判断）。

6. 屏幕阅读器测试：VoiceOver、NVDA、TalkBack

自动化工具发现不了的问题，必须用屏幕阅读器实测。三大主流：macOS 与 iOS 的 VoiceOver（系统自带，Cmd+F5 开启）、Windows 的 NVDA（开源免费，nvaccess.org 下载）、Android 的 TalkBack。WebAIM 调研显示：JAWS 占 53、NVDA 占 31、VoiceOver 占 9，但全球范围 NVDA + VoiceOver 已超 80。新项目建议至少覆盖 NVDA on Chrome / Firefox 与 VoiceOver on Safari。

测试核心流程：第一，打开屏幕阅读器，闭眼或盖住屏幕，靠听完成主转化（注册、下单、提交）。第二，听标题层级是否合理（H 键跳标题）。第三，听表单字段是否每个都有清晰 label 与错误提示。第四，听图片描述是否传达必要信息。第五，听动态内容（加载、Toast）是否被播报。常见问题：自定义控件无 role 与 aria-label，被读为「按钮按钮按钮」无差异；模态打开未播报；错误提示靠颜色无法感知；图表全无替代描述。

7. 自动化工具选型：axe / WAVE / Lighthouse / Pa11y

自动化工具能发现 30 到 40 的 WCAG 问题，是审计第一道关。axe-core（Deque 出品）是工业标准，规则严谨、误报少，axe DevTools 浏览器扩展、@axe-core/react、@axe-core/playwright 覆盖开发到 E2E 全链路。WAVE（WebAIM 出品）以可视化叠加图标著称，适合非技术角色快速理解问题。Lighthouse Accessibility 模块基于 axe-core 子集，CI/CD 内置最方便。Pa11y 适合 CLI 批量扫描站点地图，做合规巡检。

实战搭配：开发阶段在浏览器装 axe DevTools 扩展，每写一个新组件跑一遍；CI 阶段在 Playwright/Cypress 集成 @axe-core/playwright，每个核心页面跑无障碍断言，新增违规即阻塞；上线前用 Pa11y 全站扫描出报告供 QA 复核；季度审计请专业机构或残障用户做真实场景测试，覆盖工具抓不到的体验问题。

8. 法规合规：ADA / EAA / 中国信息无障碍

美国 ADA（Americans with Disabilities Act）Title III 适用于「公共场所」，2017 年 Winn-Dixie 案后司法解释明确包含商业网站，已有数百起被诉。整改通常引用 WCAG 2.1 AA。欧盟 EAA（European Accessibility Act）2025 年 6 月 28 日强制生效，覆盖电商、银行、出行 App，违规罚款由各成员国设定，最高数百万欧元。技术基线是 EN 301 549，本质对齐 WCAG 2.1 AA。

中国 2023 年 9 月《无障碍环境建设法》施行，明确政府网站、公共服务网站、新闻媒体网站、电子商务网站应当满足无障碍要求。技术标准是 GB/T 37668-2019《信息技术互联网内容无障碍可访问性技术要求与测试方法》，与 WCAG 2.1 高度对齐。出海企业建议按 WCAG 2.2 AA 做基线，覆盖所有主要法域。每次发版前用对比度检查工具验证关键页面色彩组合，用 HTML 实体工具检查 ARIA 属性中的特殊字符是否正确转义，用 JSON 格式化工具验证无障碍埋点上报数据。

常见问题

WCAG 2.2 与 2.1 主要区别是什么？

WCAG 2.2 在 2023 年 10 月正式发布，新增 9 条成功标准，重点关注移动端、低视力与认知障碍用户。例如 Focus Not Obscured（焦点元素不被遮挡）、Dragging Movements（拖拽要有替代点击方案）、Target Size Minimum（点击目标 24x24 像素以上）、Accessible Authentication（不强制纯记忆与拼图验证）。建议新项目直接以 2.2 AA 为目标。

色彩对比度 4.5:1 和 3:1 怎么区分？

WCAG AA 要求正文文字与背景对比度至少 4.5:1，大字（18pt 普通或 14pt 粗体）至少 3:1。AAA 等级要求 7:1 与 4.5:1。非文本元素（图标、表单边框、聚焦指示器）至少 3:1。商业品牌色经常踩坑：浅蓝、浅灰常常达不到 4.5:1，需要用对比度工具检查每一对前景背景色。

aria-label 和 alt 属性能互换吗？

不能。alt 是 img 标签专属，描述图片内容；空 alt 表示装饰图，屏幕阅读器会跳过。aria-label 是通用属性，给任何元素加可访问名称。img 必须用 alt（屏幕阅读器优先读 alt），button 等无文字时用 aria-label。两者同时存在时 aria-label 优先级更高，但不要在 img 上同时写两个。装饰图用 alt 等于空字符串而不是省略 alt。

自动化工具能发现多少无障碍问题？

axe-core、WAVE、Lighthouse 这类自动化工具大约能发现 30 到 40 的 WCAG 问题，主要是对比度、缺 alt、缺 label、ARIA 用错等技术性问题。剩余 60 到 70 需要人工测试：键盘是否能完成所有操作、屏幕阅读器朗读是否合理、动效是否引起前庭不适、表单错误信息是否清晰。完整审计 = 自动化扫 + 键盘测 + 屏幕阅读器测 + 真实残障用户测。

中国市场需要遵守哪些无障碍法规？

中国 2023 年 9 月起实施《无障碍环境建设法》，明确要求政府网站、公共服务网站具备无障碍功能。GB/T 37668-2019《信息技术互联网内容无障碍可访问性技术要求与测试方法》是国家标准。出海产品还要看欧盟 EAA（2025 年 6 月强制生效）、美国 ADA（私营企业被诉讼覆盖）、英国 EqA。本质都是对齐 WCAG 2.1/2.2 AA。