Skip to content

七、无障碍设计 ​

(一)无障碍概述 ​

目标用户 ​

  • 视障用户。
  • 听障用户。
  • 老年用户。
  • 肢体障碍用户。

设计原则 ​

  • 可感知。
  • 可操作。
  • 可理解。
  • 健壮性。

法规要求 ​

  • 符合《无障碍环境建设条例》。
  • 满足 WCAG 2.1 AA 标准。

(二)视觉无障碍 ​

色彩对比度 ​

元素对比度要求
普通文字4.5:1
大文字3:1
图标3:1

字体适配 ​

  • 支持字体缩放(200%)。
  • 保持文字清晰。
  • 避免使用图片文字。

屏幕阅读器 ​

  • 提供 alt 文本。
  • 使用正确的语义化标签。
  • 做好焦点管理。

(三)交互无障碍 ​

键盘导航 ​

  • 所有功能可通过键盘操作。
  • 清晰的焦点指示。
  • 合理的 Tab 顺序。

触摸适配 ​

  • 增大点击区域。
  • 支持手势替代。
  • 避免依赖精确操作。

时间控制 ​

  • 提供充足的操作时间。
  • 可暂停或延长时间限制。
  • 避免自动刷新干扰。

(四)设计自检表 ​

提交审核前请检查以下项目是否符合规范。

视觉 ​

条目说明要求
色彩对比度文字与背景对比度满足规范必选
色彩区分需区分的颜色有足够差异必选
字体大小最小字号不小于12px必选
图标识别图标含义清晰可辨必选

交互 ​

条目说明要求
键盘操作所有功能可通过键盘访问必选
焦点管理焦点顺序合理、可见必选
错误提示错误信息清晰、可恢复必选
操作反馈操作后有明确反馈必选

内容 ​

条目说明要求
替代文本图片有 alt 描述必选
表单标签表单元素有关联标签必选
页面标题每个页面有唯一标题必选
语言标识页面有语言属性必选

推荐项 ​

条目说明要求
简化操作减少不必要的操作步骤推荐
智能提示提供输入建议和自动完成推荐
高对比模式支持高对比度主题推荐