学习无障碍网页的要素
本单元挑战「无障碍让产品变丑变无聊」的误解，学习标题结构和地标如何帮助屏幕阅读器用户，以及图标与图片的设计细节。
学习目标
完成本单元后，你将能够：
- 描述好的设计如何让网页更无障碍。
- 为你的设计创建无障碍的标题结构。
- 列出向非明眼用户传达含义的策略。
无障碍是创新的催化剂而非障碍
设计界最大的误解：无障碍产品是丑陋、无聊、杂乱的。真相恰恰相反：
- 无障碍约束驱动创造力和一致性。
- 理解无障碍能带来更创新的设计。
- 产品对所有用户（不只是残障用户）都更可用。
设计与无障碍是伙伴，共享同一个目标——让每个用户都喜欢使用你的产品。与研究员合作构建用户画像时，把无障碍画像纳入其中。
远不止鼠标
作为设计师，你负责的远不止鼠标点击和视觉定位。除鼠标和视觉布局外，还要考虑：
- 整个流程的完整交互模型。
- 功能如何只用键盘操作。
- 触屏笔记本和平板。
- 在鼠标、键盘、触屏、语音输入之间切换的用户。
为用户设计，而不是为你的同行——用户与产品交互、接收信息的方式各不相同。
为每个人设计
你的用户是多样的，为所有用户设计：
- 失明、色盲、低视力的人。
- 失聪或听力受损的人。
- 行动不便的人（暂时或永久）。
- 认知障碍的人。
- 年轻用户、老年用户、高级用户、普通用户。
有意把无障碍约束排除在设计之外，就是有意把真实的人排除在产品之外。拥抱无障碍指南，如同拥抱任何设计约束——它们是创造卓越产品的挑战和动力。
理解用户界面——明眼用户
明眼用户在新网页上的定位方式：① 视觉扫读页面了解整体布局；② 识别视觉分组、大标题、列表；③ 识别熟悉的 UX 模式（卡片、选项卡、表格、树）；④ 决定从哪里开始深入。
明眼用户能在几秒内处理视觉层级——这正是好的视觉设计带来的能力，也常被我们视为理所当然。
理解 UI——盲人用户
盲人用户依赖程序化结构而非视觉线索，他们需要：清晰的标题层级（h1-h6）、语义 HTML 地标（header、nav、main、footer）、正确标记的图标和图片、交互元素的 ARIA 标签。
作为设计师，你必须在设计中指定标题和地标并传达给工程团队——这不是可选项，而是核心设计交付物。
布局——标题的力量
标题给网页提供结构——就像书的章节或论文的小节。网页用 <h1> 到 <h6> 标签程序化地创建结构。
最佳实践：每页一个 <h1>（主标题），<h2> 用于主要分区，<h3>-<h6> 用于子分区——绝不跳级。逻辑的标题结构帮助每个人，尤其是认知障碍用户。
布局——语义地标
除标题外，用语义 HTML 地标帮助用户识别在页面上的位置：Header（顶部）、Navigation（导航）、Main（主内容）、Article（自包含内容）、Aside（侧栏）、Footer（底部）。
屏幕阅读器识别地标并允许用户用键盘快捷键按区域导航。一个只有一个地标（Global Navigation）的页面，缺失了 Search、Header、Main、Article——这是设计失败，不只是代码失败。
图标与图片——两种类型
辅助技术只读文本，不会自动解读图标和图片，需要你来正确设计。两种类型处理方式完全不同：
- 装饰性（Decorative）——跳过它们，不添加相关信息或功能（冗余图标、强化相邻文字的图标）。图片需要空 alt 标签
alt=""，屏幕阅读器忽略以降低冗长。 - 信息性（Informational）——传达文字无法提供的内容。图标需要辅助文本或 aria-label，图片需要 alt 描述。写图标做什么，而非长什么样（如「上传文件」而非「回形针」）。
装饰性图标与图片
装饰性 = 无新信息、无新功能。屏幕阅读器不应读出来（增加不必要的噪音）。处理方式：图标无需特殊标记；图片需要空 alt 标签（alt=""），强制屏幕阅读器跳过。
没有空 alt 标签，屏幕阅读器会读出图片文件名（如 /images/weji2362iofweio6.png）——糟糕的体验。例如 Contact Roles、Products、Notes & Attachments 的图标都是装饰性的，因为每个都有相邻文字描述相同信息。
信息性图标与图片
信息性 = 传达周围文字没有提供的含义。常见例子：图标按钮（需知道它们做什么）、独立头像（这是谁）、对象类型图标（是 Account 还是 Contact）。
处理方式：图标加辅助文本或 aria-label，图片加 alt 描述，描述功能而非外观（「设置」而非「齿轮图标」）。即使有相邻文字，图标也可能信息性——Acme 旁边的紫色建筑图标告诉你它是 Account 而非 Contact 或 Opportunity。
总结
本单元要点：设计与无障碍是共享同一目标的伙伴；结构很重要——标题和地标给盲人用户与明眼用户相同的快速定位能力；图标和图片需要你的设计决策——装饰性就隐藏、信息性就提供描述文字。
资源——单元 1
继续学习：A Web for Everyone、Accessible Landmarks、Designing for Screen Reader Compatibility。把这些概念应用到你的设计——从审计一个页面的标题结构和地标开始。
把无障碍融入你的设计
本单元进入视觉细节——颜色与含义、对比度、非纯色背景文字、动画与运动安全、WCAG 合规。
学习目标——单元 2
完成本单元后，你将能够：
- 识别使用颜色的两个关键考量。
- 给文字和图标应用合适的颜色、对比度与比例。
- 解释动画可能对用户健康产生的影响。
色彩的重要性
颜色是设计不可或缺的部分——吸引注意力、表达品牌、传达含义、分组元素。但使用不当会给残障人士制造障碍。两大考量：
- 颜色表达含义——绝不要只用颜色呈现信息，始终提供次要视觉指示。
- 相邻颜色的对比度——文字与背景必须有足够对比，交互元素需要可见边界。
多达 1/12 的男性和 1/200 的女性是色盲。你的颜色决策影响数百万用户。
颜色表达含义——问题
绝不要只用颜色呈现信息或请求操作。反例：聊天应用用户列表用绿色 Wi-Fi 图标=活跃、橙色=空闲、红色=离线。
问题：色盲用户无法区分这些状态——红绿色盲（最常见类型）看这三个图标完全一样。这不是小麻烦，而是用户根本无法判断联系人是否可聊。
颜色表达含义——解决方案
修复：为不同状态用不同的图标，让颜色补充而非取代含义。好例子：绿色 Wi-Fi 图标=活跃、灰色小睡图标=空闲、红色离线图标=离开。
这样每个人都能看懂：色盲用户看到不同形状，明眼用户看到不同颜色和形状，屏幕阅读器用户得到文本标签。黄金法则：把设计去掉所有颜色，用户还能理解信息吗？不能，设计就需要改进。
颜色对比——WCAG 要求
第二个考量：文字与背景的对比。WCAG 2.0 要求：
- 普通文字至少 4.5:1（白底最浅灰 #767676）。
- 大文字（≥24px 或 ≥19px 粗体）至少 3:1（白底最浅灰 #959595）。
豁免：Logo 无对比要求、禁用元素无对比要求。不豁免：表单字段的占位文字必须满足 4.5:1。专业提示：占位文字满足 4.5:1 会让字段看起来已填写，所以用可见标签代替（单元 3 会讲）。
WCAG 2.1——非文本对比
WCAG 2.1 为非文本元素引入了额外对比要求——任何识别 UI 组件和状态所需的视觉信息须达到 3:1：输入字段边界、按钮边界、焦点指示器、图表的视觉部分。
例如文本框输入字段的边框相对页面背景至少 3:1（白底时边框不能浅于 #959595）。这些规则确保交互元素对所有用户可见，而不只是视力完美的人。
非纯色背景上的文字
图片或渐变上的文字往往难以阅读，还会负面影响有阅读障碍（如失读症）的用户。至少：文字须在背景图最近部分满足对比要求。更好的做法：把文字放在图片的纯色部分，或在文字与图片间加纯色背景。
若必须用非纯色背景文字，遵循三条：只用 ≥18px 的标题文字（理想一行）、渐变只用垂直方向、始终定义备用背景色（用户禁用背景图时文字仍清晰）。
用动画改善用户体验
动画是把双刃剑。好处：帮助认知障碍用户理解变化、在 UI 中定位、引导注意力到行动号召。风险——严重健康影响：前庭障碍用户的头痛、恶心、眩晕；光敏性癫痫患者的癫痫发作。
WCAG 两条关键要求：① 不得每秒闪烁/闪动超过 3 次（WCAG 2.3.2）；② 超过 5 秒的动画必须可暂停、停止或隐藏（WCAG 2.2.2）。最重要：始终让用户能关闭动画。
避免引发眩晕
三个可能引发眩晕、头痛或不适的因素：
- 运动尺寸相对屏幕大小——大动画比小的更不安，保持运动有界而非全屏。
- 运动方向不匹配——视差效果（背景上滚、前景下滚）非常令人迷失，避免同视图中的相反运动方向。
- 感知的距离——带深度的动画（3D、大景观）会引发迷失，保持运动平稳可预期。
不确定时，对运动保持保守——用户的健康取决于此。
总结
本单元要点：颜色——绝不要只用颜色传达含义，始终加次要指示（形状、文字、图案）；对比——普通文字 4.5:1、大文字和交互 UI 组件 3:1（WCAG 2.1）；非纯色背景文字——尽量放纯色区域，否则遵循三条准则；动画——不得每秒闪 3 次、超 5 秒须可暂停、始终提供关闭方式；运动安全——避免大运动、视差和深度效果。
资源——单元 2
继续学习：Contrast and Color Accessibility、Text on Backgrounds（SLDS 指南）、Designing Safer Web Animation、Color Blind Awareness。实践：用对比度检查器检查你的设计，按 WCAG 要求审计动画。
了解视觉状态指示器
最后一个单元深入交互设计——视觉焦点状态、组件状态、无障碍表单、错误消息、用户引导与安全措施。
学习目标——单元 3
完成本单元后，你将能够：
- 解释视觉焦点指示器的重要性。
- 定义什么是有帮助的错误消息。
- 描述如何设计无障碍表单。
什么是视觉焦点状态？
明眼键盘用户：视力良好但无法用鼠标的人，完全靠键盘导航。鼠标用户看到光标点点击，键盘用户按 Tab 和方向键导航——他们需要随时看到自己在哪里。
WCAG 2.4.7（Focus Visible）：键盘焦点必须始终可见，这是要求而非锦上添花。浏览器有默认焦点指示（Chrome/Safari 蓝光晕、Firefox 点状轮廓）；若自定义，须满足 3:1 对比。
各种组件状态
组件需要为每种可能的交互提供不同的视觉状态。以复选框为例，有六种状态：未选中、选中、未选中+禁用、选中+禁用、未选中+焦点、选中+焦点。
每个状态都必须视觉上与其他不同。当你定制组件时，必须设计所有状态，而不只是默认和悬停状态。
视觉选择器组件状态
定制组件时必须设计每个状态。以 SLDS Visual Picker（复选框变体）为例，三个水平排列的选项：Account、Lead、Orders，底层各是一个 HTML 复选框。
四种不同视觉状态：默认（灰边框）、聚焦+未选中（蓝边框+下划线标签）、聚焦+选中（蓝框+对勾+下划线）、未聚焦+选中（蓝框+对勾无下划线）。
注意惯例：焦点=蓝边框+下划线，悬停=仅蓝边框，选中=带对勾的蓝框。三种视觉指示混合匹配传达所有状态组合。
表单——始终包含可见标签
设计师有时想用占位文字代替真实标签，这会带来两个问题：① 占位文字须满足 4.5:1 对比，让字段看起来已填写；② 完成表单后没有可见标签，每个字段的用途可能不清楚。
解决方案：始终在每个表单字段上方或旁边使用可见标签，让用户随时理解每个字段的用途。标签不是可选的装饰，而是表单的必要导航。
设计有帮助的错误消息
表单字段出错时，只有红色边框不够：色盲用户可能看不到红色，用户也不知道如何修复。有效的错误消息必须：① 出现在出错字段下方；② 用清晰语言解释出了什么问题；③ 告诉用户如何修复。
坏：「日期无效。」好：「你的输入不符合允许的格式，请用 MMM d, yyyy（如 Jan 15, 2026）。」错误消息是教学机会——帮助用户下次成功。
引导用户成功完成表单
设计糟糕的表单会让用户从烦恼到焦虑和困惑，甚至阻止他们完成工作。较长表单的最佳实践：
- 一开始设清晰预期——有多少步、大约多久（如「5 步中已完成 3 步」）。
- 过程中显示进度——当前在第几步、接下来是什么（进度条 +「第 3/5 页」）。
- 避免时间限制——无法避免时，提前告知时限并允许延长时间。
好的表单设计消除焦虑——用户应感到被引导，而不是被测试。
提供安全措施
用户常多任务或分心，要提供恢复的方式：可返回编辑之前的输入（别让用户因发现错误而从头开始）、沿途保存进度（长表单尤其重要）、需要时可重新开始。
对于法律或金融交易，提供：提交前审核、确认交易、撤销任何收费或变更。这对在线购物、转账（银行/PayPal/Venmo）、电子合同（DocuSign/Adobe）至关重要。
回顾
本单元要点：视觉焦点指示器对键盘用户必不可少（自定义须满足 3:1 对比）；为每个组件设计所有状态（默认、悬停、焦点、选中、禁用），每个状态须视觉不同；表单需要可见标签而非只有占位文字；错误消息须解释出了什么和如何修复；用进度指示引导用户、避免时间限制，并提供编辑、保存、重来、审核、确认等安全措施。无障碍表单为每个人创造更好的体验。
资源——单元 3
继续学习：WCAG 2.4.7 Focus Visible、Give Your Site Some Focus!、WebAIM Creating Accessible Forms。最终挑战：审计你产品里的一个表单——每个字段有可见标签吗？错误消息有帮助且具体吗？每个元素键盘焦点可见吗？