关于 inclusive-user-stories
Inclusive User Stories 是一项设计技能,帮助团队从一开始就在用户故事的验收标准中纳入无障碍要求。它提供涵盖输入方式、感官、运动和认知需求的检查项,以及常见功能的模式。
主要功能
- 01将无障碍要求纳入验收标准
- 02覆盖键盘和屏幕阅读器使用
- 03加入视觉、运动和认知检查
- 04应用于表单、仪表板和通知
- 05审查故事中的能力假设
适用场景
- 01为仅使用键盘或屏幕阅读器的用户编写需求
- 02为表单和仪表板故事添加无障碍检查
- 03检查现有故事是否假设用户只用一种输入方式
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ owl-listener/ inclusive-design-skills --skill inclusive-user-stories安装后在 Claude Code 中输入/inclusive-user-stories确认已加载。
详细介绍
包容性用户故事
从一开始就将无障碍要求纳入验收标准,而不是事后另建任务。
问题所在
大多数用户故事的写法是: “作为一名用户,我希望筛选搜索结果,以便找到所需内容。”
这默认用户能够看见筛选器、点击较小的目标、阅读标签,并通过视觉处理结果。这会在不经意间排除以不同方式交互的用户。
解决方法
不要另写“无障碍故事”。将包容性要求纳入每个故事的验收标准。
故事结构
故事
沿用标准格式: “作为一名[用户],我希望[执行操作],以便[实现结果]。”
但在必要时,要具体说明用户类型:
- “作为一名仅使用键盘的用户,我希望用方向键和 Enter 筛选结果,以便无需鼠标就能缩小搜索范围。”
- “作为一名屏幕阅读器用户,我希望筛选器发生变化时能收到播报,以便知道结果已更新。”
包容性验收标准
为每个用户故事的验收标准添加以下检查项:
键盘:
- 仅使用键盘即可完整操作该功能
- 焦点顺序符合逻辑
- 每个交互元素都显示焦点状态
屏幕阅读器:
- 所有控件都有无障碍名称
- 状态变化会被播报
- 动态内容更新使用 aria-live
视觉:
- 信息不只通过颜色传达
- 文本达到最低对比度要求(普通文本为 4.5:1,大号文本为 3:1)
- 内容在 200% 缩放时仍清晰可读
运动能力:
- 触摸目标至少为 44×44px
- 不存在没有替代方案的限时交互
- 不存在没有替代方案的精确操作
认知:
- 说明使用通俗易懂的语言
- 错误消息会说明应如何处理,而不只是指出哪里出错
- 用户可以撤销操作或从错误中恢复
常见故事的模式
“作为一名用户,我希望填写表单”
添加:
- 标签清晰可见,并与字段关联
- 必填字段通过视觉和程序方式标明
- 错误信息显示在字段旁边,而不只是出现在横幅中
- 可通过键盘、触摸或语音填写表单
“作为一名用户,我希望查看仪表板”
添加:
- 数据不只通过颜色传达(使用图案、标签、数值)
- 图表附有文字摘要
- 可通过键盘浏览仪表板,且 Tab 顺序符合逻辑
- 屏幕阅读器会播报关键指标
“作为一名用户,我希望收到通知”
添加:
- 通知既通过视觉呈现,也会以程序方式播报
- 用户可以控制通知偏好设置
- 通知不会在用户读完之前消失
- 通知不会阻碍其他交互
如何审查现有故事
- 阅读每个故事并自问:它排除了哪些人?
- 检查验收标准是否涵盖键盘、屏幕阅读器、视觉、运动能力和认知方面的要求
- 标记任何默认只有一种输入方式或感官能力的故事
- 补充缺失的标准——不要另建故事
评估问题
- 验收标准是否包含键盘、屏幕阅读器和认知方面的要求?
- 无障碍标准是否属于完成定义的一部分?
- 是否已检查每个故事中关于能力的假设?
- 是否存在只能通过一种输入方式操作的故事?
评论
支持 Markdown