可用性与无障碍

可用性回答「真实用户用不用得顺」，无障碍回答「所有人（含视障、键盘、老年与临时受限用户）能不能用」。两者共用一条底线：好的体验不能挑用户。测试与量化方法见本页；前端实现与自动化测试见前端技术下的测试与样式方案。

可用性测试：5 个用户胜过 50 次猜

最小可用的流程

定目标 → 写任务脚本 → 招募 3~5 名目标用户 → 主持观察（出声思维）
→ 记录（完成率/用时/卡点）→ 排序问题 → 修复 → 回归

• 测试对象是任务不是界面：给「把成员邀请进项目并设为管理员」这样的真实任务，而不是「你觉得这个按钮好看吗」；
• 让用户出声思考（Think Aloud）：边做边说，问题往往出现在沉默处；
• 别引导：用户卡住时先记 10 秒，不要立刻提示「点这里」；
• 3~5 名即可发现大部分问题：不必追求大样本，迭代式多跑几轮更有效。

结果怎么记

任务	完成率	平均用时	卡点（用户原话/行为）	严重度
邀请成员	4/5	3:20	找不到「设置-成员」入口	高

修复顺序：严重度 = 影响用户数 × 频率 × 业务损失，先修高频高损项。

无障碍基线：WCAG 2.1 AA 够用清单

WCAG 四原则 POUR：可感知（Perceivable）、可操作（Operable）、可理解（Understandable）、健壮（Robust）。落地到设计侧最常检查的硬项：

1. 对比度（可感知）

对象	最低对比度	说明
正文、图标、输入框文字	4.5:1	含占位符、禁用但信息关键的灰色文字
大字号（≥18pt 或加粗 ≥14pt）	3:1
边框、分隔线等装饰元素	3:1（可选）	但承载信息的边框要够

色值上标「设计就查」，工具：WebAIM Contrast Checker / Stark / 浏览器 DevTools 检查器。

2. 键盘可操作（可操作）

• 所有功能键盘可达：Tab 能走到每个可交互元素，Enter/Space 能触发；
• 可见焦点环：focus-visible 状态必须有，不要 outline: none 一刀切；
• 焦点顺序合理：与视觉阅读顺序一致，弹窗打开后焦点移入、关闭后归位（焦点管理是弹窗组件的硬需求）。

3. 语义与文案（可理解 / 健壮）

• 表单要有 label（不只 placeholder），错误提示与输入框用 aria-describedby 关联；
• 按钮是「保存」不是「图标 + 全靠 hover title」：无文本图标按钮必须配 aria-label；
• 图片有 alt（信息图写内容摘要，纯装饰图 alt 留空）；
• 颜色不单独承载信息，错误=颜色+图标+文字三通道。

4. 动效与时间

• 动效跟随 prefers-reduced-motion 关闭或减弱；
• 自动播放（轮播、闪烁、自动刷新）需可控：可暂停、可关闭、时长有限；
• 会话超时前给充足提示并可续期。

可访问性审计：自动化 + 手工

自动化（每天、每次构建跑）

• axe-core / Lighthouse / @axe-core/cli：扫语义、对比度、label 等可机检项；
• 接入前端测试流水线，作为 CI 门槛，防止回归。

手工清单（发布前过一遍）

• [ ] 只用键盘走完一遍核心流程（无鼠标）
• [ ] 放大到 200% 页面不错乱、不丢内容
• [ ] 走查对比度：灰字、禁用态、占位符全部 ≥ 4.5:1
• [ ] 焦点环清晰，弹窗焦点能进能出
• [ ] 每个表单控件有 label，错误提示关联到对应输入
• [ ] 纯图标按钮有可读的 aria-label
• [ ] 颜色盲视模拟下（工具灰度/色盲滤镜）信息仍可辨
• [ ] 动效在 prefers-reduced-motion 下被关闭

常见坑速查

坑	现象	解法
灰字不可读	辅助信息用 #ccc 直接看不清	灰底白字再低饱和，也要守住 4.5:1
placeholder 当 label	聚焦后提示消失、无标签可读	显式 label + aria 关联
删除焦点环	键盘用户找不到光标在哪	保留 focus-visible，用颜色+圆环双表达
只用颜色标错误	红字但无图标无文字	三通道表达：颜色+图标+文案
测试只请「自己人」	全是熟悉产品的内部人测不出真问题	招募真实/目标用户，给真实任务
无障碍只上线前查	发版前一天才扫出 40 个问题	自动化进 CI，组件库验收含 a11y 项

检查清单

• [ ] 核心流程已用真实用户做过 1 轮出声思维测试并记录严重度
• [ ] 自动化审计接入 CI，回归即报错
• [ ] 手工清单 8 项全部通过（见上文）
• [ ] 新组件入库验收含对比度 / 键盘 / 焦点环 / aria 四项
• [ ] 设计令牌里已备一套 AA 达标的语义色

视觉与令牌见设计基础与视觉与UI 界面与设计系统；前端语义化与 ARIA 实现见前端样式方案；自动化测试工程见前端测试。