概览
WCAG（Web Content Accessibility Guidelines）2.2 聚焦“可感知、可操作、可理解、稳健”四大原则的进一步可操作化。本指南以工程落地为目标，围绕焦点可见、目标尺寸、拖拽替代、帮助一致性、冗余输入与认证易用性等主题给出实践建议与检查清单。
提示：本文不替代标准文本，建议与官方规范对照阅读，并结合组织合规要求设定验收阈值与例外流程。
关键主题与实践
1) 焦点可见与不被遮挡
- 明确焦点样式：可见的边框/阴影/底色，高对比度，非仅颜色区分。
- 焦点不被遮挡：侧边浮层/吸顶元素不得遮蔽当前焦点。
- 键盘陷阱：任何组件都应可通过 Esc/Tab/Shift+Tab 离开。
工程建议：
- 统一焦点样式 Token（颜色/宽度/内外边距），在组件库一处维护。
- 为弹窗、侧栏、菜单管理可聚焦顺序（焦点圈定与返回）。
- E2E 增加“Tab 路径可达与焦点可见”用例。
2) 目标尺寸（Minimum）
- 触控/点击目标建议不小于 24×24 px，留足安全间距。
- 将文本链接与周边元素分隔，避免误触。
- 图标按钮在小屏适配中应增大可点区域（例如使用内补白）。
工程建议：
- 在设计 Token 中定义
--tap-target-min-size并在按钮/链接统一复用。 - 针对卡片、列表项添加
hit area扩展，触发区大于视觉区。
3) 拖拽动作的替代方式
- 对仅拖拽可完成的任务，提供点击/输入等非拖拽替代。
- 排序/上传/画布移动等交互，均应可通过键盘操作实现。
工程建议：
- DnD 组件暴露可编程接口：上/下/置顶/置底等命令式方法。
- 文案指引：清晰提示“可使用按钮完成同样操作”。
4) 一致可用的帮助（Help）
- 表单/流程类页面提供稳定入口的帮助（文档、客服、FAQ）。
- 不应在关键任务中隐藏帮助入口；移动端保证可触达。
工程建议：
- 在全局布局预留帮助入口区域（页头/页脚/固定按钮）。
- 统一“错误-帮助-恢复”体验：错误消息可读、帮助直达、可撤销。
5) 冗余输入与认证易用性
- 减少重复填写：允许复用已知信息或自动填充。
- 认证过程避免依赖记忆（如仅图形验证码或复杂口令），提供替代因素。
工程建议：
- 利用浏览器自动填充、地址簿、最近值回填等通道减少输入摩擦。
- 对验证码提供听觉/文本/延时刷新等替代途径（参考
/blog/captcha-accessibility-issue）。
设计与开发检查清单
- 焦点样式清晰、与主题形成足够对比；焦点不会被固定元素遮挡
- Tab 顺序合理、可循环退出；组件无键盘陷阱
- 点击/触控目标尺寸 ≥ 24×24 px，间距充足；小屏有命中扩展
- 所有拖拽交互均有可键盘/按钮的替代方式
- 表单/流程页存在固定帮助入口；错误信息清晰可理解
- 认证与表单输入避免“强记忆”，支持自动填充与冗余输入优化
- 动画可被“降低动态效果”系统设置抑制；文本不随动画消失
与工程体系的集成
- 组件库：在按钮、链接、输入、弹窗、菜单、拖拽组件中内置上述能力。
- 样式系统：提供焦点、间距、命中区等主题 Token 并在多主题复用。
- 测试：加入 A11y 单测/Lighthouse 无障碍检查，E2E 覆盖键盘路径。
- 文档：在设计规范与工程规范同步约束，提供示例代码与对照图。
进一步阅读
- 无障碍设计总览：
/blog/accessibility-guidelines - WCAG 评分模型简述：
/blog/wcag-3-scoring-model - 验证码的可访问性问题：
/blog/captcha-accessibility-issue - 可持续设计与能耗优化：
/blog/sustainable-web-design
- 返回博客首页：
/blog - 查看无障碍类文章：
/blog?category=无障碍与设计