无障碍
目标是 WCAG 2.2 AA,三种风格、亮暗两种模式都要达到,没有「好看的风格可以例外」。
对比度
- 正文和它的底色 ≥ 4.5:1;24px 以上或 19px 以上加粗的大字 ≥ 3:1。
- 控件边框、焦点环、图标、优先级标记这类非文字元素 ≥ 3:1。
- 全部组合由
build-tokens.mjs检查,结果见「色彩」一节的对比度表。新增 token 时同步把它的组合加进脚本里的PAIRS。
焦点
- 所有可交互元素都要有可见焦点:
--focus-width粗的focus-ring实线,外偏移 2px。萌虎的焦点环 3px,像素的焦点环在暗色里是琥珀色,和荧光绿区分开。 - 只给键盘焦点显示焦点环(
:focus-visible),鼠标点击不显示。 - 打开对话框、详情面板和命令面板时,焦点移进去;关闭后回到触发它的元素。
键盘
| 按键 | 作用 |
|---|---|
| ⌘K / Ctrl K | 命令面板(搜索、跳转、切换风格) |
| N | 新建任务 |
| J / K | 在列表里上下移动 |
| Enter | 打开任务详情 |
| X | 完成或取消完成 |
| T | 开始或停止计时 |
| E | 编辑标题 |
| 1–4 | 切换列表、表格、甘特、看板视图 |
| H / L | 看板里切换分栏;Shift H / Shift L 把卡片移到相邻分栏 |
| Esc | 关闭面板或退出拖动 |
快捷键在三种风格里一样。像素风格默认显示快捷键提示条,其他风格可以在设置里打开。
读屏
- 勾选框是真正的
checkbox,标签写「标记完成:迁移 PostgreSQL schema 与索引」。 - 优先级读出文字(「优先级:紧急」),不读
!!!!;像素风格的!用aria-hidden。 - 计时器用
role="timer",只在开始、停止时播报,不逐秒播报。 - 新通知用
aria-live="polite"播报一次,内容包括人和动作:「陈默评论了迁移 PostgreSQL schema 与索引」。 - 头像要有人名;只显示首字母时,
aria-label写全名。 - 看板拖动必须有键盘替代(Shift H / Shift L),并播报「已移到评审中,第 2 张」。
- 页面声明
lang="zh-CN";夹在中文里的英文专有名词不用另外标注。
其他
- 触屏点击区不小于 44×44,视觉更小的控件用透明外扩补足。
- 颜色不单独表意:优先级、逾期、未读、完成都另有文字或图形。
- 尊重系统的「减少动态效果」和「增大文字」:字号用 rem 或 Flutter 的
textScaler,在 200% 文字缩放下列表行允许换行,不截断按钮文字。 - 像素风格的中文回退到系统黑体,字号不低于 12px;需要更易读的用户可以随时切到青藤。