一次预约，多种浏览方式：无障碍设计的日常价值

为感知、操作与理解而设计

界面通过文字、位置、颜色和行为沟通。无障碍设计把同一含义带到不同呈现方式。与控件正确关联的可见标签也为屏幕阅读器提供名称，合理的标题结构既帮助视觉浏览，也方便通过辅助技术跳转主题。

WCAG以可感知、可操作、可理解和稳健来组织原则。可以问：信息怎样到达人，控件怎样使用，旅程怎样解释自己，浏览器怎样理解结构？把问题应用于真实任务，就能指导组件设计。

用名称支持明确的行动

预约表单需要姓名、邮箱和场次。可见标签让输入过程中始终能理解字段用途。也要在代码中关联，例如让标签的for匹配字段id。浏览器能够传达关系，标签也扩大选择区域。

选择“选择工作坊日期”“确认预约”等行动名称。原生按钮与链接提供熟悉行为和键盘基础。查看计算后的无障碍名称，并用屏幕阅读器体验组件。一致的可见名称和播报名称帮助人们识别同一操作。

建立容易跟随的页面路线

使用Tab和Shift+Tab前进，打开日历并选择场次。可见焦点显示当前位置，合理顺序连接相关操作。在设计系统中赋予焦点清晰样式，让固定导航和提示的位置保持当前控件可见。

模态对话框为一项选择提供集中空间。打开后将焦点移入，提供可预期的键盘操作和明确关闭动作，再把焦点返回合适位置，通常是开启控件。这样的连续性帮助用户保持方向感。通过真实组件体验结构与行为的配合。

用结构与替代信息传达意义

标题形成有用提纲。按内容层级选择级别，用样式安排外观。读者可以视觉扫描，也可以沿标题找到主题。指定页面语言，并给出能区分用途的标题。

替代信息说明图片在上下文中的作用。工作坊示意图可以介绍座位或材料；纯装饰可用空alt，让注意力集中在信息上。图片链接描述目的地或行动。复杂图表配上主要结论、附近解释或数据表，提供多种理解方式。

支持不同观看条件下的舒适阅读

选择容易区分的文字与背景颜色。WCAG AA通常要求普通文字至少4.5:1、符合定义的大字至少3:1，并设有明确例外。检查实际渲染颜色，包括照片上文字、焦点与反馈状态。将合适组合存入设计系统，便于复用。

尝试放大文字和窄窗口。重排让大多数内容在相当于320 CSS像素宽度下沿单一阅读方向呈现；本质为二维的内容有规定例外。保持导航、说明和操作可用。预留媒体空间并合理安排覆盖层，支持舒适阅读。

把每个设计选择与用户收益连接

表单反馈和最初说明一样可以帮助前进。用具体语言解释下一步，保留已完成输入，让帮助容易找到。清晰确认说明之后会发生什么。把这些模式应用到共享组件，收益便能覆盖更多表单。

让无障碍模式进入日常工作

用键盘完成预约，用屏幕阅读器探索名称与标题，并查看缩放、重排和对比度。包含说明、选中状态、进度与确认。自动化提供可重复的标记观察，真实任务与相关用户的反馈帮助塑造使用体验。

记录页面、组件和预期行为，方便团队重复查看。更新后也体验另一张使用该组件的页面。把好标签、焦点与反馈留在设计系统中。在二十页复用一个好字段，让无障碍成为整个网站的共同能力。

借助Sitelemetry把知识用于实践

Sitelemetry检查HTML中的标签、图片替代信息、文档结构和选定的对比度条件。这些观察帮助你认识自己页面中的良好实践，并选择继续发展的组件。结合这里的键盘与屏幕阅读器旅程，在设计演进时重复相关检查。