accessibility

无障碍

无障碍关注一个问题：

人们能否借助辅助工具、使用不同的输入方式，或在能力不同的情况下使用这个产品？

它专门关注残障人士能否平等地感知、理解、浏览和交互产品——无论他们使用屏幕阅读器、仅用键盘、开关、语音控制、放大功能还是字幕。这是面向所有人进行设计的能力一面。情境一面——语言、文化、设备、可负担性、信心——则属于相关的 inclusive-design 技能。两者有所重叠，但侧重点不同；应将它们区分开来，避免彼此的内涵被稀释。

何时使用

当任务涉及以下任一事项时，请使用此技能：符合 WCAG 标准、ARIA、语义标记、屏幕阅读器支持、键盘／焦点管理、颜色对比度、文本替代内容（替代文本、字幕、文字稿）、无障碍表单和错误消息、目标尺寸、计时／超时、动作敏感，以及认知无障碍。有人要求“让这个更无障碍”、执行无障碍审计，或检查残障用户能否完成某项任务时，也请使用此技能。

**何时不要使用：**如果真正关心的是哪些人因情境因素而被排除在外——非英语使用者、使用廉价手机或慢速网络的人、负担不起流量的人、初次使用或感到焦虑的用户，或使用全球各地不同姓名／地址格式的人——这属于包容性，而非无障碍。请切换到 inclusive-design 技能。

思维模型：POUR

WCAG 将所有无障碍要求归纳为四项原则。请用它们作为审计视角——你发现的每个问题都对应其中一项。

• 可感知 — 用户能够通过某种渠道感知内容。不要只依赖一种感官。（为图像提供文本替代内容，为音频和视频提供字幕／文字稿，确保颜色对比度充足，不要只用颜色传达含义，并确保内容在放大后能够重排且完整呈现。）
• 可操作 — 用户能够通过自己拥有的输入方式操作界面。（所有内容都能通过键盘访问和使用，焦点清晰可见，不会陷入键盘陷阱，目标尺寸足够大，时间限制宽裕或可调整，不包含可能诱发癫痫的闪烁内容。）
• 可理解 — 用户能够预测并理解产品行为。（标签、说明和错误消息清晰；导航保持一致；交互行为可预测；语言易于阅读。）
• 健壮 — 辅助技术能够正确解析内容。（语义结构有效；每个控件都具有正确的名称／角色／值；优先使用原生语义，仅在弥补不足时使用 ARIA。）

对于任何元素，一个实用的测试方法是：*如果我看不见、听不见、不能用鼠标，或者无法快速阅读，还能完成这项任务吗？*如果任何一种情况下答案是否定的，你就找到了失效的原则。

你要为谁以及什么进行设计

应针对人们实际使用的辅助工具和输入方式进行设计，而不是一个抽象的“残障用户”：

• 屏幕阅读器（VoiceOver、TalkBack、NVDA、JAWS）——需要正确的语义、阅读顺序和标签，并能获知动态变化。
• 仅用键盘和开关的用户——需要合乎逻辑的焦点顺序、清晰可见的焦点，以及不依赖鼠标的交互。
• 语音控制——需要清晰可见、易于说出的标签，且标签要与无障碍名称一致。
• 屏幕放大和缩放——需要在 200% 及以上缩放时仍能重排，且无需水平滚动或不会发生裁切的布局。
• 字幕／文字稿使用者——包括聋人和听力障碍者，以及身处嘈杂或安静环境中的任何人。
• 有认知和学习障碍的人——需要清晰的语言、较低的记忆负担，以及宽容的操作流程（见下文）。

请注意一个反复出现的规律：这些设计大多能惠及远超目标群体的人——这也是推动包容性设计的同一洞见。

快速审核清单

按顺序检查以下项目；每一项都是一件具体的检查或修复事项。

1. 键盘 — 用 Tab 键遍历整个流程。每个控件都能访问并操作吗？焦点是否可见？顺序是否合理？会不会陷入无法脱离的状态？
2. 屏幕阅读器 — 每个控件是否都会播报有意义的名称和角色？图片是否提供了文本替代内容（或标记为装饰性图片）？动态更新内容（错误、加载状态、提示消息）是否会被播报？
3. 对比度与颜色 — 文本是否达到最低对比度要求（正文 4.5:1，大号文本 3:1）？是否有仅通过颜色传达的含义（例如，只用红色表示错误，没有图标或文本）？
4. 结构 — 标题、列表、地标/区域和标签是否采用语义结构，而非仅有视觉样式？阅读顺序是否与视觉顺序一致？
5. 表单与错误 — 每个字段是否都有标签（而不只是占位符）？错误是否以文本形式指出、关联到对应字段，并说明如何修正？
6. 目标与时限 — 点击目标是否足够大且间距合理？是否取消了时限，或让时限足够宽裕、可调整？是否使用自动保存来防止数据丢失？
7. 媒体与动效 — 音频/视频是否提供字幕/文字稿？UI 是否遵循减少动态效果偏好？是否没有任何内容每秒闪烁超过约 3 次？
8. 缩放/重排 — 在 200% 缩放（或使用较大的系统字体）时，内容是否能重新排布，避免被截断或出现水平滚动？

超越合规：认知无障碍

WCAG 并未涵盖认知和学习障碍人士（如阅读障碍、ADHD、自闭症、痴呆、失语症，以及记忆或注意力差异人士）的所有需求。W3C COGA 指南是 补充性指南，并非符合 WCAG 的必要条件。而高影响力的改进往往集中在这里，能惠及数量最多的隐性群体：语言清晰、设计一致、指令分步呈现、不依赖记忆、出错后易于恢复，以及尽量减少干扰。

如果任务涉及可读性、复杂流程、表单、登录，或用户觉得“令人困惑/不堪重负”，请阅读 references/cognitive-accessibility.md，了解 COGA 的八个目标及其具体设计模式。

动态效果、感官与年龄相关需求

动画和动态效果可能造成实际伤害（恶心、眩晕、注意力丧失），影响前庭障碍人士；对光敏感人士则可能诱发癫痫。请遵循用户的 prefers-reduced-motion 设置——减少或替换动态效果，而不是移除所有反馈。

老年用户群体庞大，他们因年龄增长而产生的视力、灵巧度、听力和记忆力变化，与残障需求直接重叠——在此做好设计，有助于所有人随着年龄增长继续使用你的产品。（在包容性设计技能中，将 年龄视为背景/身份维度——如首次使用时的信心、人生阶段；在此处关注 与年龄相关的能力变化。）

请阅读 references/motion-and-sensory.md，了解 prefers-reduced-motion 模式（含代码）、光敏感限制，以及老年用户与残障人士在能力需求上的重叠。

如何验证

自动化检查工具（axe、Lighthouse、Accessibility Scanner 等）可能只能发现约三分之一的问题——它们不可或缺，但绝不够用。务必补充手动检查：先仅用键盘操作真实流程，再用屏幕阅读器操作一次，然后开启操作系统的减少动态效果和大字体设置进行检查。工具无法发现的缺陷——例如毫无道理的焦点顺序、名不副实的标签——往往才是真正阻碍用户的问题。

参考资料

只有在任务需要深入了解时才加载：

• 认知无障碍 — W3C COGA：8 项目标及其设计模式（超出 WCAG 范围）。
• 动效与感官 — 减少动态效果（附 CSS 示例）、光敏性、老年用户能力的重叠之处。

主要来源：

• 无障碍、易用性与包容性 — W3C WAI
• 让认知和学习障碍人士能够使用内容（COGA）— W3C
• 老年用户与 Web 无障碍 — W3C WAI
• prefers-reduced-motion — MDN