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

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

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

---

## 7. 无障碍设计

### 7.1 键盘导航

**Tab 键导航顺序**：

1. <!-- 页面1 焦点顺序 -->
2. <!-- 页面2 焦点顺序 -->

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

---

### 7.2 焦点可见性

**焦点环样式**：
- 颜色：<!-- 色值 -->
- 宽度：2px
- 样式：实线（solid）
- 偏移：2px（outline-offset）

---

### 7.3 ARIA 标签

**关键元素 ARIA 标签**：

```html
<!-- <!-- 表单示例 --> -->
<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 屏幕阅读器公告

**关键事件公告**：

1. <!-- 事件1公告文案 -->
2. <!-- 事件2公告文案 -->

---

### 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): 初始化模板