109 lines
2.0 KiB
Markdown
109 lines
2.0 KiB
Markdown
# 用户体验设计 — 无障碍与响应式
|
||
|
||
**文档版本**: 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): 初始化模板
|