设计稿可访问性设计需要注意什么

本文目录导读：

1. 色彩与对比度
2. 可点击区域与交互元素
3. 文本与排版
4. 图片与图标
5. 布局与导航
6. 设计稿交付物（给开发同事的标注）
7. 设计稿检查清单

在设计稿阶段考虑可访问性（Accessibility, a11y）是成本最低且效果最好的方式，这不仅能帮助视障、听障、行动障碍或认知障碍用户，也能让所有用户（如在强光下、嘈杂环境中）获得更好的体验。

以下是设计稿中需要重点关注的可访问性设计要点,按重要性排序：

色彩与对比度

这是设计稿中最常见也最容易出现问题的地方。

1. 颜色对比度（最核心）

   • 正文/小号文字： 文本/背景的对比度至少需要 4.5:1（WCAG AA 标准）。
   • 大号文字（粗体 14pt 以上或常规 18pt 以上）： 对比度至少需要 3:1。
   • （图标、按钮边框、输入框边框）： 与邻近背景的对比度至少需要 3:1。
   • 工具建议： 使用 Stark、A11y - Color Contrast Checker（Figma/Sketch 插件）或在线工具 WebAIM Contrast Checker 实时检测。

2. 不要仅依赖颜色传达信息

   • 错误提示： 不能只把输入框变红，必须配合图标（如感叹号） 或文字提示。
   • 图表/链接： 不能只通过颜色区分不同数据项，必须配合纹理、标签或下划线。
   • 链接样式： 在正文段落中，链接除了颜色不同，必须有下划线或明显的悬停/聚焦样式。

3. 深色模式考虑

   如果支持深色模式,确保在上述对比度标准下依然有效。

可点击区域与交互元素

1. 触控目标大小

   • 建议尺寸： 任何可点击元素（按钮、链接、图标按钮）的最小可点击区域为 44x44 CSS 像素（WCAG 2.5.5 推荐）。
   • 视觉建议： 即使图标很小，也需要将点击面积扩展到 44pt，避免用户手指点不准。

2. 焦点状态（Focus State）

   • 看得见的焦点环： 键盘用户（如无法使用鼠标的人）通过 Tab 键导航时，当前聚焦的元素必须有清晰、高对比度的视觉反馈。
   • 设计规范： 不要依赖浏览器默认的蓝色虚线，而是设计一套匹配品牌风格的焦点样式（如 2px 实线边框 + 偏移量）。

3. 手势交互

   • 避免仅用手势： 不要设计“只有滑动才能删除”、“只有双指缩放才有效”的交互。
   • 提供备选方案： 复杂的滑动手势（如 Tinder 的左右滑）必须提供可点击的按钮作为备选。

文本与排版

1. 文字大小与缩放

   • 相对单位： 设计稿中使用 px 时，需要确保当浏览器缩放至 200% 时，内容不丢失、不重叠。
   • 避免截断： 不要对重要信息（如地址、验证码）使用单行截断或固定高度，用户放大字体后会看不到内容。

2. 行高与段落间距

   • 行高： 正文建议 5 倍 字号；标题建议 3 倍 字号。
   • 段落间距： 至少为字号大小的 2 倍，这有助于阅读障碍用户。

3. 语言与可读性

   • 避免使用过于复杂的词汇或句子。
   • 避免使用全大写字母（对屏幕朗读器不友好，且难以阅读），尤其是在中文字体中。

图片与图标

1. 图标需带标签

   • 纯装饰性图标（如菜单汉堡图标）： 需要有 aria-hidden="true" 属性（交给开发标注）。
   • 功能性图标（如购物车、搜索）： 必须附带文字标签，如果因为设计限制不能显示文字，必须提供可访问的替代文本（Alt Text）。
   • 设计标注： 需要在设计稿中明确标注：“这个图标需要 alt 文本：'搜索'” 或 “这个图标是装饰性的，标记为 aria-hidden”。

2. 图片的替代文本

   • 复杂信息图（如图表、流程图）： 设计稿旁应附带长描述文本，供低视力用户查看。
   • 功能型图片（如“打印”按钮的图片）： 替代文本应描述其功能（），而不是描述图片外观。

布局与导航

1. 内容顺序与 DOM 顺序

   • 视觉顺序 ≠ 代码顺序： 使用 Flexbox 或 Grid 时，视觉上靠左的内容可能代码中靠右，对于键盘和屏幕朗读器用户，导航顺序是代码顺序。
   • 设计建议： 组件的 Tab 键导航顺序应该从左到右、从上到下，且符合逻辑，如果内容块左右布局，确保重要内容（导航、搜索）先出现。

2. 表单与错误验证

   • 标签关联： 每个输入框都必须有一个清晰、可见的标签（Label），且标签位置在输入框上方或左侧（上方最优）。
   • 占位符（Placeholder）不能作为标签： 一旦用户输入，占位符消失，用户无法确认输入内容。
   • 错误反馈： 错误信息应显示在输入框附近，并包含具体说明（“请输入 11 位手机号”），而不是“输入有误”。

3. 多模态交互

   • 如果设计中有音视频内容,需要预留字幕、手语翻译或文字转录的位置。
   • 如果界面包含自动滑动或动画,提供“暂停/停止”按钮。

设计稿交付物（给开发同事的标注）

除了视觉稿,还需要提供以下标注：

1. 语义化结构： 标记哪里是 <h1>, <h2>, <nav>, <main>, <aside>。
2. 角色（Role）： 如果使用了非标准元素（如 div 做了一个开关），标注 role="switch" 和 aria-checked="false"。
3. 状态（State）： 提供所有元素的所有状态设计稿：
   • Normal（默认）
   • Hover（鼠标悬停）
   • Focus（键盘聚焦）
   • Active（按下瞬间）
   • Disabled（禁用）
   • Error（错误状态，尤其是表单）
   • Selected（选中状态，如标签页）

设计稿检查清单

在交付前,问自己几个问题：

• [ ] 如果没有鼠标，我是否能用键盘（Tab+Enter）完成所有主要操作？
• [ ] 如果没有屏幕（只用读屏软件），所有内容是否有意义？
• [ ] 如果切换到灰色模式，是否所有信息依然可读（颜色盲检测）？
• [ ] 如果放大到 200%，布局是否会崩掉？

你可以使用 Figma 的 A11y 插件（如 Stark, A11y Focus Order, Contrast）快速检查，一次性做到位的设计稿能极大减少开发阶段的返工和 Bug。

标签： 对比度