人机交互与无障碍
引入
词汇
| English | 释义 | 拼音 |
|---|---|---|
| states/steɪts/ | 状态 | zhuàng tài |
| transitions/trænˈsɪʃnz/ | 转移 | zhuǎn yí |
以状态设计
- 借阅流程五个状态 states（浏览、详情、确认、完成、错误）与带标注的转移 transitions。每个可达状态都要有可见出口——错误态保留输入并返回详情。
{exercise:uni-cs1203-states}
练习
每个可达界面状态都需要——
难度 1/5 · 今日首次完成可获 100 金币及少量额外奖励
无出口即陷阱；错误态带着输入返回详情。
无障碍即力学
- WCAG 四条：可感知（正文对比度 $\ge 4.5{:}1$）、可操作（键盘可达、焦点可见）、可理解（标签而非占位符）、健壮（语义）。
- 课程原型实测：正文 7:1 过；灰禁用钮 2.9:1 不过——换成 4.6:1 加下划线。可度量才是无障碍，否则是装饰。
{exercise:uni-cs1203-contrast}
练习
正文对比度至少——
难度 1/5 · 今日首次完成可获 100 金币及少量额外奖励
WCAG AA：正文 4.5:1；7:1 稳过。
键盘路径
- 只用 tab 和 enter 完成借阅：焦点序 = 视觉序、每个控件焦点可见、确认按钮被朗读。只悬停才出现的菜单过不了——测试先于用户发现。
- 丢输入的错误态、占位符当标签：反复出现的缺陷。
{exercise:uni-cs1203-keyboard}
练习
键盘路径失败，当——
难度 1/5 · 今日首次完成可获 100 金币及少量额外奖励
只悬停的入口 tab 到不了。