team/docs/设计-UX-无障碍与响应式.md

用户体验设计 — 无障碍与响应式

文档版本: 1.0.0 最后更新: 2026-04-19 所属模块: 06-设计-UX.md → 无障碍与响应式

主索引: 06-设计-UX.md | 本文件: §7 无障碍设计 + §8 响应式行为

---

7. 无障碍设计

7.1 键盘导航

Tab 键导航顺序：

焦点管理：

• 对话框打开时自动聚焦第一个输入框
• 对话框关闭时返回触发元素
• Toast 消息不获取焦点

---

7.2 焦点可见性

焦点环样式：

• 颜色：
• 宽度：2px
• 样式：实线（solid）
• 偏移：2px（outline-offset）

---

7.3 ARIA 标签

关键元素 ARIA 标签：

<!-- <!-- 表单示例 --> -->
<form role="form" aria-label="<!-- 表单名称 -->">
  <input aria-label="<!-- 字段名称 -->" aria-required="true">
</form>

<!-- <!-- 列表示例 --> -->
<ul role="listbox" aria-label="<!-- 列表名称 -->">
  <li role="option"><!-- 条目 --></li>
</ul>

<!-- Toast 消息 -->
<div role="status" aria-live="polite" aria-atomic="true"><!-- 消息内容 --></div>

---

7.4 屏幕阅读器公告

关键事件公告：

---

7.5 色彩对比度

WCAG AA 标准：

• 正文文字：对比度 >= 4.5:1
• 大号文字（24px+）：对比度 >= 3:1
• 图标和图形：对比度 >= 3:1

---

7.6 高对比度模式

支持方式：

• 检测系统高对比度设置
• 自动切换到高对比度主题
• 增强边框和轮廓

---

8. 响应式行为

8.1 窗口大小调整

最小窗口:

窗口尺寸行为：

宽度	布局变化
>=
<

---

8.2

---

版本历史:

• v1.0.0 (2026-04-19): 初始化模板