第 04 课 | 第四幕：老年模式

第四幕：老年模式（第8-10集）

最有挑战的部分——让 65 岁的老人也能无障碍使用

第8集：两种模式，一套代码

场景：标准模式做好了，现在要加老年模式。不能做两套。

• CSS Custom Properties + body.elderly-mode：一个 class 切换全部视觉
• 老年模式视觉标准：68px 按钮（v1 定 80px，实测 68px 舒适）、26px 字体、7:1 对比度
• 模式切换三种方式：UI 按钮 + 键盘 m 键 + localStorage 记住偏好
• 300ms CSS transition 平滑过渡（background、font-size、width）
• 老年模式隐藏 ( ) % 按钮——简化界面，不是删功能
• visibility: hidden + pointer-events: none 而非 display: none（保留 Grid 单元）
• 核心概念：CSS 变量让主题切换变成改几个值

产出文件：

• style.css — .elderly-mode 全部覆盖样式（白底蓝主题，大按钮大字体）
• app.js — 模式切换逻辑（initMode / toggleMode + localStorage）
• index.html — data-hide-elderly 属性 + 模式切换按钮 + 音效按钮
• tests/mode/switch.test.js — 模式切换测试

对应命令：/gsd-discuss-phase 3，/gsd-plan-phase 3，/gsd-execute-phase 3

---

第9集：无障碍不是加分项，是基本功

场景：视觉做好了，但盲人怎么用？老年用户屏幕阅读器怎么办？

• ARIA labels：每个按钮中文描述（aria-label="七"、aria-label="除"）
• 焦点指示器：Tab 键能看到自己在哪，老年模式 3px 蓝色 outline（WCAG AAA 要求更粗）
• 屏幕阅读器：算完 2+3=5，要播报 "2+3 等于 5"（aria-label 动态更新）
• 长按退格：老年模式下长按 ⌫ 500ms 清空全部（touchstart 定时器）
• 按钮音效：Web Audio API 800Hz 0.05s beep，默认关，localStorage 记住开关
• 音效为什么重要：老年用户视力下降时，听觉反馈是第二确认通道
• 核心概念：无障碍不是事后补丁，是设计的一部分

产出文件：

• app.js — ARIA 动态更新（announceResult）+ 长按检测（_longPressTimer）+ 音效系统（playClickSound）
• tests/a11y/aria.test.js — ARIA 属性测试
• tests/a11y/focus.test.js — 焦点指示器测试

对应命令：/gsd-execute-phase 3（续）

---

第10集：踩坑——老年模式按钮溢出了

场景：以为做完了，打开老年模式一看，按钮撑破了容器。

• Bug：按钮溢出容器边界
• 根因：display: none 破坏 CSS Grid auto-placement（隐藏元素不占位）
• 修复：visibility: hidden + pointer-events: none（占位但不显示不交互）
• 加固：grid-template-columns: repeat(4, 1fr) + width: auto 防溢出
• 配色修复：老年模式白底 + 蓝色主题（#1a73e8），对比度 > 7:1
• 布局微调：display 区域蓝色渐变背景，按钮阴影层次感
• file:// 协议限制：Chrome ES module 不支持，改用传统 <script> + exports 兼容
• 核心概念：CSS Grid 的隐藏规则——隐藏元素不等于移除元素

产出文件：无新增，修复 style.css + index.html

对应命令：/gsd-quick 或直接修复