做无障碍/包容性设计评审时，用 WCAG 2.2…

当进行 a11y 审计、WCAG 合规检查、屏幕阅读器/键盘导航/颜色对比/触摸目标评审，或要判断产品是否真能让所有人使用时使用。

适用场景

解决思路

1. 将无障碍作为一等设计学科而非合规清单；从设计开始就把无障碍作为默认，不在设计完成后才补。
2. 与 /journey 协作：确保流程对键盘、屏幕阅读器、开关访问、语音控制用户可用，而不只是鼠标和触摸；审查输入方式独立性。
3. 与 /journey 协作：设计拖拽交互时提供键盘替代；设计移动手势流程时提供单指针回退。
4. 与 /articulate 协作：清晰写作就是无障碍写作；使用平实语言、短句、有意义的链接文本（如 'Read the accessibility report' 而非 'Click here'）、描述性标题、说明输入期望的标签。
5. 与 /organize 协作：导航结构必须可被辅助技术解析；使用 landmarks（header、nav、main、footer）、标题层级（H1 到 H6 不跳级）、skip links、breadcrumbs；确保 IA 转化为合理的屏幕阅读器体验。
6. 与 /fortify 协作：协调避免重复；本技能负责无障碍方法论，/fortify 负责状态与压力测试方法论；为慢连接、小屏幕、单手使用、极端内容设计时同时考虑弹性与包容。
7. 与 /evaluate 协作：将无障碍评估纳入每次 UX 评估；将详细无障碍方法论输入评估框架；无障碍类别的发现路由给本技能。
8. 与 /specify 协作：每个 handoff spec 都包含无障碍需求；ARIA roles、键盘交互模式、焦点管理行为、屏幕阅读器公告是核心 spec 需求而非 nice to have；无障碍需求编织进整个 handoff，而不是单独一节。
9. 与 /blueprint 协作：标记架构决策如何创造或阻止无障碍；通知系统需要 ARIA live regions；实时更新需要 polite announcements；无限滚动需要替代导航。
10. 与 /philosopher 协作：追问 '我们排除了哪些甚至没想到的人？'；暴露 '所有人' 定义中的假设：未想象的用户群、未考虑的情境、包容设计仍可能遗漏的人。
11. WCAG 感知 - 颜色对比：正常文本至少 4.5:1，大文本（18pt+ 或 14pt+ 粗体）和 UI 组件至少 3:1；在明暗模式检查；针对实际背景检查，文本在图像上时用最坏情况对比。
12. WCAG 感知 - 文本替代：每个有意义的图像提供传达相同信息的 alt 文本；装饰图像用空 alt（alt=''），让屏幕阅读器跳过。
13. WCAG 感知 - 文本替代：复杂图像（图表、示意图、信息图）同时提供短 alt 文本和较长描述；作为操作的图标提供可访问名称。
14. WCAG 感知 - 媒体：视频需要字幕（不是自动生成直接当成品）；音频内容需要文字稿；动画需要暂停控制；任何内容不应自动播放声音。
15. WCAG 感知 - 颜色独立：绝不只用颜色传达信息；加入形状、图标、标签或图案；'必填字段用红色标记' 失败，'必填字段用星号（*）标记' 可行。
16. WCAG 感知 - 重排：内容在 400% 缩放时必须重排适应视口，不出现水平滚动（需要二维布局的内容如数据表除外）；将浏览器设为 320px 宽测试，内容被截断或重叠即失败。
17. WCAG 可操作 - 键盘可访问：每个交互元素必须仅用键盘可达和可操作；Tab 导航，Enter 或 Space 激活，复合控件内箭头键，Escape 关闭；任何操作不得要求鼠标悬停、右键或多指手势而无替代。
18. WCAG 可操作 - 无键盘陷阱：Tab 必须总能前进，Shift+Tab 后退；唯一可接受的焦点陷阱在模态对话框内，且必须可用 Escape 关闭。
19. WCAG 可操作 - 时间限制：若存在会话超时或定时交互，用户必须能延长、关闭，或在到期前至少 20 秒收到警告；例外是实时事件（拍卖、考试）时间限制必要。
20. WCAG 可操作 - 无癫痫触发：任何内容每秒闪烁不超过 3 次；适用于视频、动画插画、过渡效果；这是医疗安全问题，不可选。
21. WCAG 可操作 - 触摸目标：WCAG 2.2 最小 24x24 CSS 像素；主要操作推荐 44x44px；相邻目标最小 8px 间距。
22. WCAG 可操作 - 跳过导航：每个页面第一个可聚焦元素应为 'Skip to main content' 链接；屏幕阅读器和键盘用户不必 tab 过整个导航才能到内容。
23. WCAG 可理解 - 阅读水平：根据受众，消费产品目标 8 年级阅读水平；专业工具可更高，但说明和错误信息尽量简单；用短句，避免术语，首次使用定义技术术语。
24. WCAG 可理解 - 一致导航：导航在每个页面相同位置、相同顺序；用户建立心智模型，页面间移动导航会破坏模型，对认知障碍用户尤其迷失。
25. WCAG 可理解 - 可预测交互：点击链接应导航；改变下拉不应自动提交表单；悬停不应触发不可逆操作；不应有意外上下文变化；用户始终掌控。
26. WCAG 可理解 - 输入辅助：每个表单输入需要可见标签（不只是 placeholder，聚焦后会消失）；提交前标明必填字段；错误信息必须识别字段和问题；提供预期格式示例（'MM/DD/YYYY'）而非只有字段名。
27. WCAG 健壮 - 有效 HTML 结构：语义 HTML 是基础；按钮用 button，链接用 a，标题用 heading 元素，列表用 list 元素；语义 HTML 无需额外工作即可向辅助技术传达结构和用途。
28. WCAG 健壮 - 正确使用 ARIA：ARIA 是 HTML 语义补充而非替代；第一条规则：如果原生 HTML 元素能做同样的事，不要用 ARIA；第二条：错误 ARIA 比没有 ARIA 更糟；div role='button' 不处理 Enter 和 Space 比没有 role 更糟，因为告诉屏幕阅读器是按钮但不行为像按钮。
29. WCAG 健壮 - 用真实辅助技术测试：自动化工具约捕获 30% 问题；其余 70%——不合逻辑阅读顺序、令人困惑交互模式、缺失上下文、差焦点管理——需要实际辅助技术手动测试。
30. 屏幕阅读器 - 阅读顺序：确保 DOM 顺序匹配视觉顺序；CSS flexbox order、绝对定位、grid 布局可能导致视觉与阅读顺序分歧；屏幕阅读器读 DOM 顺序；最重要内容应在 DOM 中靠前。
31. 屏幕阅读器 - landmarks：使用 header、nav、main、complementary（侧栏）、contentinfo（页脚）；每页恰好一个 main；导航用 nav 元素，可有多个，用 aria-label 标注 'Primary navigation'、'Footer navigation'。
32. 屏幕阅读器 - 标题层级：H1 页面标题，H2 主要章节，H3 子章节；绝不跳级；绝不将标题元素用于视觉样式——若看起来像标题但结构上不是，用 CSS；若结构上是标题，无论外观都用标题元素。
33. 屏幕阅读器 - live regions：无页面重载的动态内容（通知、聊天消息、表单验证消息、自动更新数据、进度指示器）需要 aria-live 区域；aria-live='polite' 用于可等用户空闲的更新；aria-live='assertive' 仅用于应打断用户的紧急更新；过度使用 assertive 体验糟糕。
34. 屏幕阅读器 - 表单标签：每个输入必须有程序化标签——label 元素 with for 指向输入 ID，或 aria-label，或 aria-labelledby；placeholder 不是标签；相关输入组（单选、复选）包在 fieldset 中并用 legend 命名组。
35. 屏幕阅读器 - 状态沟通：交互元素必须传达当前状态：展开/折叠 aria-expanded、选中/未选中 aria-selected、勾选/未勾选 aria-checked、当前页 aria-current='page'、禁用 aria-disabled 或 disabled。
36. 屏幕阅读器 - 隐藏内容：装饰图像用 aria-hidden='true' 或空 alt；仅供屏幕阅读器的内容（如纯图标按钮的描述标签）用 visually-hidden CSS 类，保持在 DOM 但屏幕不可见；不要用 display:none 或 visibility:hidden 用于屏幕阅读器专用内容。
37. 键盘 - 焦点管理：Tab 前进，Shift+Tab 后退；tab 顺序应匹配视觉阅读顺序；每个交互元素必须可聚焦；若可点击，必须可 tab；使用原生交互元素，或添加 tabindex='0' 并处理键盘事件。
38. 键盘 - 可见焦点指示器：当前聚焦元素必须视觉明显；2px+ 实线轮廓，与背景对比至少 3:1；不只是颜色变化；不是 subtle dotted line；默认浏览器焦点环可作最低标准；绝不 outline: none 而不提供更好替代。
39. 键盘 - skip links：第一个可聚焦元素为 'Skip to main content' 链接；可视觉隐藏直到聚焦（按 Tab 出现，焦点移过后再隐藏）；让键盘用户跳过重复导航块。
40. 键盘 - focus traps：焦点只应困在模态对话框；模态打开时焦点移入；Tab 在模态交互元素内循环；Escape 关闭并返回焦点到触发元素；其他下拉、菜单、侧栏不应困住焦点。
41. 键盘 - roving tabindex：Tab 组、菜单、工具栏、单选组等复合控件使用 roving tabindex；Tab 进入落在活动/选中项；箭头键在项间移动；Tab 出到下一个控件；保持 tab 序列可控。
42. 键盘 - 自定义快捷键：若实现自定义快捷键，记录它们；不要与辅助技术快捷键冲突；提供查看、修改或禁用自定义快捷键的方式；单字符快捷键（如按 's' 搜索）必须可重映射，符合 WCAG 2.1。
43. 认知无障碍 - 平实语言：根据受众目标 8-12 年级阅读水平；短句；每句一个想法；避免双重否定；避免跨文化不翻译的习语；首次使用定义术语；复杂概念拆成步骤；阅读难度不是用户的问题，是写作者的问题。
44. 认知无障碍 - 一致模式：同一操作在各处同样工作；若 'X' 在一个页面关闭模态，所有地方用 'X' 关闭；若在列表左滑删除，所有列表左滑删除；主操作总在右下就保持；不一致迫使用户每屏重新学习。
45. 认知无障碍 - 错误预防：确认破坏性操作；尽早验证输入——内联，用户输入时，而不是提交后；为可逆操作提供撤销；用约束防止无效输入（日期选择器代替自由文本日期字段，下拉代替要求精确格式）；不要依赖用户 '小心'。
46. 认知无障碍 - 最小记忆负荷：识别优于回忆——展示选项而不是要求记住；显示最近项目、保存搜索、常用操作；若流程引用早期步骤信息，再次显示该信息；多步流程显示已完成、当前、后续。
47. 认知无障碍 - 清晰进度：多步流程中说明我在哪、还剩多少、能否回去、能否保存稍后继续；步骤指示器（Step 2 of 5）是最低可行进度沟通；显示步骤名称更好；允许在已完成步骤间非线性导航最理想。
48. 认知无障碍 - 可预测行为：无意外弹窗；无自动重定向；无自动播放内容；无仅悬停触发动作；用户应始终掌控接下来发生什么。
49. 运动无障碍 - 触摸目标：WCAG 2.2 最小 24x24 CSS 像素；推荐 44x44px 主要交互目标；相邻目标最小 8px 间距；正文内联文本链接豁免尺寸要求，但导航链接和操作按钮不豁免；测量可点击区域，不只是可见元素，padding 也算。
50. 运动无障碍 - 手势替代：每个滑动、捏合、多指手势、路径手势（画形状）必须有单指针替代；左滑删除也必须有删除按钮；捏合缩放也必须有缩放控件；多指旋转必须有替代输入。
51. 运动无障碍 - 拖放替代：若项目可通过拖拽重排，提供上移/下移按钮、重排菜单或排序下拉；拖放需要精确运动控制，且除非构建否则没有键盘等价。
52. 运动无障碍 - 定时：定时交互（按住删除、长按预览）必须有替代或可调整时间；要求 500ms 按住的按钮对震颤用户不可访问；提供普通点击加确认、菜单选项或可调整定时设置。
53. 运动无障碍 - 精确性：避免要求精确定位的操作；模态关闭按钮至少 44x44px；小复选框使用标签也作为点击目标；仅悬停出现的交互元素有问题；给目标慷慨命中区域和宽容激活。
54. 包容设计超越合规 - 低识字：图标配文字标签；积极使用视觉层级，让最重要信息最视觉突出；提供结果视觉预览；用渐进披露减少一次可见文本量；可能时绝不只依赖文本而不给视觉表示。
55. 包容设计超越合规 - 低带宽：设计在 2G 连接工作；渐进加载——先文本，再图像，再增强；懒加载首屏以下内容；积极压缩图像；提供比媒体先加载的文本替代。
56. 包容设计超越合规 - 旧设备：核心功能不应依赖前沿浏览器 API；渐进增强——基础体验处处可用，现代浏览器获得额外功能；在 3-5 年前设备测试；不要假设充足 RAM、快速处理器或当前 OS。
57. 包容设计超越合规 - 情境损伤：为单手手机使用、明亮阳光、嘈杂环境、移动车辆、黑暗环境设计；为这些情境设计也就为许多永久障碍设计。
58. 包容设计超越合规 - 老化：基础字号最小 16px 且可增大；提供高对比模式；提供减少动态选项并尊重 prefers-reduced-motion；慷慨触摸目标；避免时间压力；简化导航。
59. 包容设计超越合规 - 神经多样性：减少感官过载——无自动播放、无可暂停动画、无闪烁、无压倒性配色；支持专注——减少干扰、清晰信息层级、允许自定义通知频率；提供结构——可预测布局、清晰标签、一致导航；避免歧义——字面语言、明确说明、无歧义图标带标签。
60. 测试 - 自动化：使用 axe（浏览器扩展和 CI 集成）、Lighthouse（内置于 Chrome DevTools）、WAVE（浏览器扩展视觉叠加）；每个页面和状态运行自动扫描；修复所有标记问题；理解限制：通过自动测试不意味着体验无障碍。
61. 测试 - 手动键盘：从第一个到最后一个元素 Tab 整个流程；能否到达每个交互元素？能否激活每个按钮和链接？能否导航每个下拉和菜单？焦点顺序是否逻辑？焦点指示器是否可见？能否逃离每个模态和覆盖层？能否不用鼠标完成主要任务？对每个主要流程做，不只是首页。
62. 测试 - 屏幕阅读器：Mac/iOS 上用 VoiceOver（内置，Cmd+F5 切换）；Windows 上用 NVDA（免费下载）；Android 上用 TalkBack（内置）；每个目标平台至少测试一个屏幕阅读器；听阅读顺序、角色和状态、表单标签、live regions、结构。
63. 测试 - 缩放：200% 和 400% 浏览器缩放；内容应重排适应无水平滚动；文本保持可读；交互元素保持可用；不应重叠或被裁剪；在用户实际使用的浏览器测试。
64. 测试 - 颜色对比：使用对比检查器（多数浏览器 DevTools 内置，或 Colour Contrast Analyser 等独立工具）；检查每个文本-背景组合、每个图标、每个交互元素边界；检查焦点指示器与其背景；明暗模式都检查；针对实际背景检查，图像或渐变上的文本需计算最坏情况对比。
65. 测试 - 减少动态：在 OS 设置中启用 'Reduce motion'（Mac: System Settings > Accessibility > Display > Reduce motion）；界面是否尊重 prefers-reduced-motion？必要动画是否替换为非动态替代？过渡是否仍不依赖移动传达状态变化？
66. 测试 - 自动化遗漏的差距：阅读顺序是逻辑合理还是仅技术存在？标题结构反映实际内容层级还是只是视觉设计？屏幕阅读器公告真正帮助用户还是只增加噪音？键盘交互模式直观还是技术可用但令人困惑？真实残障用户能否完成主要任务流程？这些问题需要人类判断。
67. 输出 - 按 WCAG 原则组织无障碍审计：Perceivable、Operable、Understandable、Robust；分别列出发现：对比度、文本替代、媒体、颜色独立、重排；键盘、焦点、时间限制、触摸目标、跳过导航；阅读水平、一致性、可预测性、输入辅助；语义 HTML、ARIA 使用、辅助技术兼容。
68. 输出 - 文档化屏幕阅读器流程：关键页面/流程阅读顺序、landmark 结构、标题层级、live region 行为、表单标签审计。
69. 输出 - 键盘导航图：关键流程 Tab 顺序、模态/下拉/自定义控件焦点管理、键盘快捷键清单、焦点陷阱审计。
70. 输出 - 修复计划分级：Critical（P0）阻止某些用户访问；High（P1）显著降低体验；Medium（P2）低于 WCAG AA 合规；Low（P3）低于最佳实践。
71. 语气 - 将建议框架为改善体验而非满足法律门槛；先讲用户收益，而非 success criterion 编号，例如焦点指示器不仅满足 WCAG 2.4.7，还帮助每个键盘用户知道位置。
72. 语气 - 不回避法律现实：WCAG 2.1 AA 在 ADA（US）、European Accessibility Act（EU）、Section 508（US government）、Accessibility for Ontarians with Disabilities Act（Canada）和数十国家等效立法下法定要求；网页无障碍诉讼十年来每年增加。
73. 语气 - 具体可行动：不要只说 'Improve color contrast'；例如 'The body text (#767676) on white background fails WCAG AA at 4.48:1 — change to #595959 (7:1) or darker. Affects all body text across the application, approximately 80% of readable content.'
74. 语气 - 教导规则背后的 why：不只引用 WCAG 标准，解释人类影响；例如图标按钮没有可访问名称时，屏幕阅读器只念 'button'，用户在 8 个图标按钮的工具栏中无法区分；添加 aria-label='Delete item'。
75. 语气 - 假设善意：多数无障碍失败是疏忽而非决定；角色是让不可见变可见，而非指责；将发现框架为改进机会而非惩罚失败。

适用边界 · 注意事项

• 不负责在代码中实现 ARIA；这是 /specify 向工程 handoff 的职责，本技能只提供需求和约束。
• 不负责撰写最终无障碍文案、设计视觉设计系统或系统级无障碍架构；分别交由 /articulate、视觉设计系统和 /blueprint，本技能提供建议/约束并标记影响。
• 不负责亲自执行与残障用户的用户研究；交由 /investigate，本技能只建议包容性研究方法。