为每个人打造可用的数字产品，是现代产品设计的核心责任。无障碍性不是项目末尾可以简单勾选的选项；它是一项根本性的设计原则，从最初的草图阶段就开始影响决策。当设计师在早期就融入无障碍标准时，他们就能打造出可用、包容且稳健的界面。
本指南概述了您需要了解的关键标准。内容涵盖网页内容无障碍指南（WCAG）、视觉设计要求、交互模式以及内容策略。遵循这些指南，您可以确保设计能够支持具有不同能力的用户，包括失明、失聪、运动障碍或认知差异的用户。
🌐 理解WCAG框架
网页内容无障碍指南（WCAG）是网页无障碍性的国际标准。由万维网联盟（W3C）管理，这些指南为使网络内容对残障人士更具可访问性提供了框架。尽管最初专注于网络，但这些原则广泛适用于软件、应用程序和数字产品。
这些指南分为三个合规级别：
- 级别A： 最低可访问性级别。如果网站未达到此标准，则完全不可访问。
- 级别AA： 中等水平。这是大多数法律合规和行业标准的目标。
- 级别AAA： 最高的可访问性级别。虽然理想，但通常无法对所有内容实现。
大多数组织的目标是达到WCAG 2.1 级别AA 的合规性。这种平衡确保了高可用性标准，同时又不会使开发变得不可行。设计师应熟悉该级别内的具体成功标准。
🏗️ 无障碍的四大原则（POUR）
WCAG 建立在四大核心原则之上。每个设计决策都应基于这些支柱进行评估。如果设计未能满足其中任何一项原则，则该设计就是不可访问的。
1. 可感知
信息和用户界面组件必须以用户能够感知的方式呈现。无论用户的感官能力如何，都必须能够感知到所呈现的信息。
- 文本替代： 为非文本内容提供文本替代。例如，图像必须配有描述性替代文本。
- 基于时间的媒体： 为基于时间的媒体提供替代方案，例如视频的字幕。
- 可适应： 创建内容，使其能够以不同方式呈现而不会丢失信息。
- 可区分： 让用户更容易看到和听到内容。
2. 可操作
用户界面组件和导航必须可操作。所有功能都必须可通过键盘访问，且用户必须有足够的时间来阅读和使用内容。
- 键盘可访问： 所有功能都必须能够通过键盘界面操作。
- 足够的时间： 用户必须有足够的时间来阅读和使用内容。
- 癫痫发作和身体反应： 不要设计会引起癫痫发作的内容。
- 可导航： 提供方法帮助用户导航、查找内容并确定自己的位置。
3. 可理解性
信息和用户界面的操作必须是可理解的。用户必须能够理解信息以及用户界面的操作。
- 可读性： 使文本内容具有可读性和可理解性。
- 可预测性： 使网页以可预测的方式呈现和运行。
- 输入辅助： 帮助用户避免和纠正错误。
4. 健壮性
内容必须足够健壮，以便被各种用户代理（包括辅助技术）可靠地解释。
- 兼容性： 最大化与当前和未来用户工具的兼容性。
- 有效代码： 确保代码有效，以便屏幕阅读器和浏览器能够正确解释。
🎨 视觉设计标准
视觉设计在可访问性中起着关键作用。高对比度、清晰的排版和有考虑的颜色使用，确保内容对每个人都是可读的，包括低视力或色盲人士。
颜色对比度
对比度是指使物体可区分的亮度或颜色差异。低对比度的文本对许多用户来说难以阅读，尤其是有视觉障碍的人。
- 正常文本： 标准文本的对比度至少应为 4.5:1 与其背景相比。
- 大号文本： 字体大小为18pt或14pt加粗的文本必须具有至少 3:1.
- 用户界面组件： 图标和用户界面元素必须具有至少 3:1 与相邻颜色之间的对比度。
不要仅依靠颜色来传递信息。例如，如果使用红色文本表示错误，还应包含一个图标或文字消息来解释错误。
排版与间距
字体选择和间距对可读性有显著影响。无衬线字体通常比衬线字体在屏幕上更易阅读。
- 字体大小： 基础字体大小应至少为16px。避免仅通过字号来传达重要性。
- 行高： 确保行高至少为字体大小的1.5倍，以防止行与行在视觉上合并。
- 字距： 增加字距，以提高阅读障碍或低视力用户的可读性。
- 段落间距： 确保段落之间有足够的间距，以区分文本块。
⌨️ 交互与导航标准
交互设计必须考虑到无法使用鼠标的人群。这包括依赖键盘、开关设备或语音控制的运动功能障碍者。
键盘导航
用户必须仅通过键盘就能导航整个界面。Tab键顺序必须符合逻辑，遵循页面的视觉流程。
- Tab键顺序： 确保焦点在界面中逻辑地移动。
- 焦点指示器： 永远不要移除默认的焦点轮廓。如果自定义它，请确保其清晰可见，并与周围内容有明显区别。
- 跳转链接： 提供一种机制，用于跳过重复内容，例如导航菜单。
焦点管理
当内容动态变化时，必须正确管理焦点。例如，如果弹出模态框，焦点应移入模态框中。当模态框关闭时，焦点应返回到触发它的元素。
触摸目标
对于移动设备和触摸界面，交互元素必须足够大，以便准确点击。
- 最小尺寸：触摸目标的大小应至少为44×44 CSS像素。
- 间距：确保目标之间有足够的间距，以防止意外激活。
📝 内容与语义结构
内容结构有助于辅助技术理解信息的层级和含义。语义化HTML是这一结构的基础。
标题与层级
使用标题来逻辑地组织内容。用户通常会跳过标题以快速查找信息。
- 逻辑顺序：不要跳过标题层级。应从H1到H2，再到H3。不要从H1直接跳到H4。
- 描述性文本：标题应清晰地描述其后的内容。
表单与标签
表单是复杂的交互点，需要清晰的标签和错误处理。
- 关联标签：每个输入字段都必须有程序上关联的标签。
- 错误识别：错误必须以文本形式标识，并由屏幕阅读器朗读。
- 错误建议：提供纠正错误的建议。
图像与图标
图像传达的信息必须对无法看到它们的用户可访问。
- 替代文本：提供替代文本，传达与图像相同的功能或含义。
- 装饰性图像：如果图像仅为装饰性，则应标记为装饰性，以便屏幕阅读器忽略它。
- 复杂图像：为复杂的图表或图示提供详细描述。
📊 常见设计陷阱与解决方案
下表概述了常见的设计问题及其可访问性解决方案。
| 常见陷阱 | 可访问性问题 | 解决方案 |
|---|---|---|
| 低对比度文本 | 低视力用户难以阅读文本。 | 使用对比度检查工具，确保对比度达到4.5:1。 |
| 仅靠颜色指示 | 色盲用户无法区分状态。 | 在颜色之外添加图标或文字标签。 |
| 缺少焦点状态 | 键盘用户无法看到当前位置。 | 为所有交互元素设计可见的焦点指示器。 |
| 表单标签不明确 | 屏幕阅读器无法识别输入字段。 | 确保每个输入项都有对应的标签。 |
| 自动播放媒体 | 干扰用户并妨碍注意力集中。 | 禁用自动播放，或立即提供暂停按钮。 |
| 触摸目标过小 | 对运动功能障碍用户来说难以操作。 | 确保触摸目标至少为44×44像素。 |
🧪 测试你的设计
没有测试，可访问性设计就不完整。自动化工具很有帮助，但无法发现所有问题。
自动化审计
使用自动化工具来发现常见的问题，例如缺少替代文本、对比度不足或无效的颜色组合。这些工具为合规性提供了基准。
- 检查颜色对比度：验证设计系统中各处的对比度水平。
- 验证结构： 确保语义标签被正确使用。
- 检查替代文本： 检查所有图像是否都有描述。
手动检查
自动化工具会忽略上下文。手动检查可确保用户体验是合理的。
- 仅使用键盘： 仅使用 Tab 键导航您的界面。您能访问所有内容吗？
- 缩放： 将界面缩放到 200%。内容是否断裂或重叠？
- 焦点顺序： 焦点是否在界面中逻辑地移动？
用户测试
没有任何东西能取代来自真实用户的反馈。在您的用户研究中包含残障人士。
- 招募多样化的用户： 包括有视觉、运动和认知障碍的用户。
- 观察任务： 观察用户在不干预的情况下完成关键任务的过程。
- 收集反馈： 询问用户他们的使用体验和痛点。
🏛️ 设计系统的作用
设计系统是扩展可访问性的强大工具。通过将可访问性融入组件库，您可以确保整个产品的一致性。
- 标准化组件： 创建可访问的按钮、输入框和模态框版本。
- 令牌管理： 定义满足对比度和尺寸要求的颜色和间距令牌。
- 文档： 清晰地记录每个组件的可访问性要求。
- 审查流程： 在设计系统审批流程中包含可访问性检查。
⚖️ 法律与伦理考量
除了可用性之外，可访问性通常是一项法律要求。政府和组织会实施标准，以确保平等访问。
法律合规
各种法律都规定了数字可访问性。不合规可能导致诉讼和罚款。
- 第508节：要求联邦机构使电子和信息技术可访问。
- 美国残疾人法案（ADA）：美国残疾人法案适用于公共场所，包括网站。
- 欧洲无障碍法案：为欧盟的产品和服务设定了标准。
道德责任
打造包容性产品是正确的事情。根据能力排除用户会限制产品的潜力，并疏远相当大一部分人群。
- 市场覆盖：每四名成年人中就有一名有残疾。忽视可访问性会缩小你的市场。
- 品牌声誉：以包容性著称的公司能与客户建立更强的信任。
- 未来保障：随着技术的发展，可访问性确保你的产品始终可用。
🔄 跟上变化
可访问性标准在不断演变。新技术和用户需求不断出现。保持信息更新至关重要。
- 关注更新：关注WCAG的更新和新指南。
- 社区参与：参与可访问性社区和论坛。
- 持续学习：投入时间学习新的技术和工具。
🛠️ 将可访问性融入工作流程
为了使可访问性成为习惯，应将其融入设计过程的每个阶段。
研究阶段
在用户研究计划中包含可访问性。识别可能从你的产品中受益的残障用户。
设计阶段
在线框图和原型设计阶段就应用无障碍标准。不要等到最后才修复问题。
开发交接
为开发人员提供清晰的规范。包括对比度值、焦点状态和交互细节。
质量保证阶段
在你的质量保证检查清单中包含无障碍测试。确保新功能不会破坏现有的无障碍功能。
🔍 具体成功标准深入解析
理解具体的成功标准有助于你精确地应用这些标准。
1.1.1 非文本内容
呈现给用户的任何非文本内容都必须有文字替代，以实现相同的目的。
- 图像：替代文本必须描述内容。
- 按钮：如果一个图标是一个按钮，aria-label 必须描述该操作。
2.4.7 聚焦可见
任何可通过键盘操作的用户界面都应有一种操作模式，使键盘焦点指示器可见。
- 可见性：焦点指示器必须在背景上清晰可见。
- 对比度：焦点指示器必须满足 3:1 的对比度要求。
3.3.3 错误建议
如果检测到输入错误，系统应建议更正。
- 清晰性： 建议必须清晰且可操作。
- 无障碍性： 建议必须与输入程序化关联。
4.1.2 名称、角色、值
对于用户界面组件，名称和角色可以被程序确定。
- 语义化 HTML：尽可能使用原生 HTML 元素。
- ARIA：仅当原生HTML不足以满足需求时，才使用ARIA属性。
💡 设计师实用技巧
以下是一些可操作的建议，可帮助您优化日常设计工作流程。
- 使用对比度工具：设计时保持对比度检查插件或工具开启。
- 检查字体大小：确保当浏览器字体大小增加时，所有文本都能正确缩放。
- 使用屏幕阅读器进行测试：偶尔使用屏幕阅读器测试您的原型，以了解用户体验。
- 与同事共同审查：请同事审查您的设计是否存在可访问性问题。
- 记录决策：在设计笔记中解释为何做出某些可访问性选择。
🌍 全球标准
虽然WCAG是主要标准，但其他地区也有自己的指南，通常与之保持一致。
- ISO 9241：视觉显示终端办公工作的人体工程学要求。
- EN 301 549：公共部门机构可访问性的欧洲标准。
- 第508节：美国联邦标准。
遵循WCAG 2.1 AA通常能满足大多数这些地区性要求。
🚧 处理例外情况
有时，设计需求可能与可访问性标准冲突。在这种情况下，应记录例外情况并提供替代方案。
- 理由：解释为何需要此例外。
- 替代方案：为无法使用该例外的用户提供可访问的替代方案。
- 批准：在实施例外之前，需获得利益相关方的批准。
📢 倡导与领导力
设计师通常需要在团队和组织内部倡导无障碍设计。
- 教育利益相关者：解释无障碍设计的商业价值。
- 分享资源：向你的团队提供文章和指南。
- 以身作则：使你自己的作品具备无障碍性，并将其作为参考分享。
🔗 进一步学习的资源
有许多资源可供你深入学习。
- WCAG 官方网站：指南的主要来源。
- WAI 教程：关于无障碍设计的教育材料。
- Deque 大学：无障碍专业人士的培训与认证。
- A11y 项目：由社区驱动的检查清单和资源。
通过致力于这些标准，你将为更加包容的数字环境做出贡献。无障碍设计是一段持续的旅程，而非终点。保持好奇心，持续学习，并在每一个设计决策中优先考虑包容性。
设计的未来是包容性的。你的设计具有赋能用户并创造人人适用体验的力量。从今天开始应用这些标准吧。
