畅想：一个极致无障碍的论坛界面
<![CDATA[# 畅想：一个极致"无障碍"的论坛界面
---
## 核心理念：无障碍不是"附加功能"，而是界面的底层基因
真正无障碍的论坛，不是在普通界面上"打个补丁"，而是从零开始以**所有用户都能平等参与**为设计原点。
---
## 一、感知层 — 让所有人都能"看到"和"听到"
### 视觉无障碍
- **高对比度模式**：默认满足 WCAG AAA (7:1)，提供多套对比度方案（标准/高/超高），一键切换，无闪烁
- **文字完全可缩放**：支持 200% 缩放不溢出、不截断，最大支持 400%；所有容器用 `rem`/`em` 而非 `px`
- **绝非仅靠颜色传达信息**：状态指示（置顶/精毕/已读）同时使用图标+文字+形状，色盲用户不会遗漏任何信息
- **焦点指示器极度醒目**：键盘焦点有 3px+ 的粗外框，颜色与背景高对比，绝不会被忽略
- **减少动画模式**：尊重 `prefers-reduced-motion`，关闭所有自动滚动、闪烁、渐变
### 听觉无障碍
- 音频/视频内容**必须**提供字幕、文字稿
- 语音通知有对应的视觉闪光提示
---
## 二、交互层 — 让所有人都能"操作"
### 键盘完全可达
- **零鼠标依赖**：发帖、回复、编辑、删除、搜索、导航、拖拽排序——全部键盘可完成
- **逻辑 Tab 顺序**：从顶栏→主内容→侧边栏→底部，符合阅读流
- **跳转链接 (Skip Links)**：Tab 第一下就出现"跳到主内容""跳到发帖区"
- **快捷键系统**：`J/K` 上下帖子、`R` 回复、`N` 新帖、`/` 聚焦搜索——可自定义
### 触控与运动无障碍
- 点击目标**最小 44×44px**，间距充足，不会误触
- 无需精确悬停才能触发的交互（拒绝纯 hover 菜单）
- 支持开关设备 (Switch Device)、眼动追踪等辅助输入
### 语音操作
- 界面所有操作均可通过语音指令完成（"发帖""回复三楼""搜索XX"）
---
## 三、认知层 — 让所有人都能"理解"
### 简洁的信息架构
- **扁平结构，最多 3 层**：首页 → 版块 → 帖子，不搞深层嵌套
- **一致的布局模式**：每个页面结构相同，学会一次，处处通用
- **进度提示**：长帖有"阅读进度条"，表单有"第2步/共3步"
### 清晰的语言
- 界面文案用**平实语言**，避免行话和隐喻
- 提供术语解释浮层（"什么是'置顶'？"）
- 错误信息说清**是什么、为什么、怎么办**（❌ "操作失败" → ✅ "标题不能为空，请在顶部输入框填写标题"）
### 减少认知负荷
- 默认隐藏高级选项，"简单模式"下只保留发帖、回复、搜索三个核心操作
- 帖子列表提供**摘要视图**和**完整视图**切换
- 长帖自动折叠，"只看楼主""只看精华"一键可达
---
## 四、界面长什么样 — 具体画面
```
┌──────────────────────────────────────────────────┐
│ [≡ 菜单] 论坛名称 [🔍 搜索] [⚙ 偏好] │ ← 顶栏固定，大按钮
├──────────────────────────────────────────────────┤
│ 跳到主内容 | 跳到发帖区 | 跳到搜索 │ ← Skip Links（Tab显现）
├──────────┬───────────────────────────┬───────────┤
│ │ │ │
│ 📌 置顶 │ 帖子列表 │ ☀/🌙主题 │
│ 📋 版块 │ ┌─────────────────────┐ │ Aa 字号 │
│ 🔥 热门 │ │ 📌 [图标] 公告标题 │ │ 🎨 对比度 │
│ ⭐ 收藏 │ │ 摘要预览文字... │ │ ⌨ 快捷键 │
│ │ │ 张三 · 3小时前 │ │ │
│ │ └─────────────────────┘ │ 简单模式 │
│ │ ┌─────────────────────┐ │ [开/关] │
│ │ │ [图标] 普通帖子 │ │ │
│ │ │ 摘要预览文字... │ │ │
│ │ └─────────────────────┘ │ │
│ │ │ │
├──────────┴───────────────────────────┴───────────┤
│ [＋ 发新帖] ← 悬浮按钮，44px+，键盘可达 │
└──────────────────────────────────────────────────┘
```
### 帖子详情页
```
┌──────────────────────────────────────────────────┐
│ ← 返回列表 帖子标题 [⋯ 操作] │
├──────────────────────────────────────────────────┤
│ │
│ 👤 张三 · 管理员 · 2026-07-06 14:30 │
│ ───────────────────────────────────── │
│ 正文内容，文字清晰，行高 1.6+， │
│ 段落间距充裕，不拥挤。 │
│ │
│ [👍 赞同 12] [💬 回复] [🔗 分享] [⋯] │ ← 大按钮，有文字标签
│ │
│ ├─ 💬 李四 · 2026-07-06 15:00 │
│ │ 回复内容... │
│ │ [👍 5] [💬 回复] │
│ │ │
│ └─ 💬 王五 · 2026-07-06 15:30 │
│ 回复内容... │
│ [👍 2] [💬 回复] │
│ │
├──────────────────────────────────────────────────┤
│ [回复此帖] 输入框（大号，清晰标签） [发送] │
└──────────────────────────────────────────────────┘
```
---
## 五、关键特性清单
| 维度 | 特性 | 优先级 |
|------|------|--------|
| **视觉** | WCAG AAA 对比度，可缩放至 400% | 必须 |
| **视觉** | 深色/浅色/高对比三套主题 | 必须 |
| **视觉** | `prefers-reduced-motion` 动画控制 | 必须 |
| **视觉** | 颜色+图标+文字三重编码 | 必须 |
| **交互** | 100% 键盘可达 | 必须 |
| **交互** | Skip Links + 快捷键系统 | 必须 |
| **交互** | 44px 最小点击区域 | 必须 |
| **交互** | 无纯 hover 交互 | 必须 |
| **辅助技术** | 语义化 HTML + ARIA | 必须 |
| **辅助技术** | 屏幕阅读器友好（landmark、live region） | 必须 |
| **辅助技术** | 语音操作支持 | 应该 |
| **认知** | 简单/高级模式切换 | 应该 |
| **认知** | 一致的页面结构 | 必须 |
| **认知** | 清晰的错误提示 | 必须 |
| **认知** | 阅读进度指示 | 应该 |
| **内容** | 音视频必须有字幕/文字稿 | 必须 |
| **内容** | 图片必须有 alt 文本（强制提示） | 必须 |
| **个性** | 用户可保存自己的字号/对比度/布局偏好 | 应该 |
| **个性** | 偏好设置云端同步 | 可选 |
---
## 六、与主流论坛的差距
| 特性 | Discourse | 传统论坛 | 我们畅想的 |
|------|-----------|----------|-----------|
| 键盘导航 | 部分 | 几乎无 | 完整 |
| 屏幕阅读器 | 中等 | 差 | 原生优化 |
| 对比度方案 | 深色/浅色 | 无 | 三级+自定义 |
| 缩放支持 | 200% | 经常崩 | 400% |
| 简单模式 | 无 | 无 | 核心特性 |
| 语音操作 | 无 | 无 | 原生支持 |
| 认知减负 | 部分 | 无 | 系统性设计 |
---
**总结**：极致无障碍论坛的本质是——**假设每个用户都可能以你没想到的方式使用你的界面**。它不是"为残障人士做的特殊版本"，而是一个**对所有人来说都更舒服、更高效**的界面。无障碍做得越好，普通用户的体验也越好。
这个方向如果用在 Aether 主题的演进上，可以作为差异化定位——大多数论坛主题追求"视觉炫酷"，而我们可以做"最易用的论坛界面"。]]>