配置: 初始化 ISOS Agent Teams 软件研发模板

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

@@ -0,0 +1,108 @@
+# 用户体验设计 — 无障碍与响应式
+
+**文档版本**: 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): 初始化模板