mcpField
I
inclusive-user-stories

inclusive-user-stories

github.com/owl-listener设计与 UI10872 次安装20 周前更新
代码仓库

关于 inclusive-user-stories

Inclusive User Stories 是一项设计技能,帮助团队从一开始就在用户故事的验收标准中纳入无障碍要求。它提供涵盖输入方式、感官、运动和认知需求的检查项,以及常见功能的模式。

主要功能

  1. 01将无障碍要求纳入验收标准
  2. 02覆盖键盘和屏幕阅读器使用
  3. 03加入视觉、运动和认知检查
  4. 04应用于表单、仪表板和通知
  5. 05审查故事中的能力假设

适用场景

  1. 01为仅使用键盘或屏幕阅读器的用户编写需求
  2. 02为表单和仪表板故事添加无障碍检查
  3. 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 顺序符合逻辑
  • 屏幕阅读器会播报关键指标
“作为一名用户,我希望收到通知”

添加:

  • 通知既通过视觉呈现,也会以程序方式播报
  • 用户可以控制通知偏好设置
  • 通知不会在用户读完之前消失
  • 通知不会阻碍其他交互

如何审查现有故事

  1. 阅读每个故事并自问:它排除了哪些人?
  2. 检查验收标准是否涵盖键盘、屏幕阅读器、视觉、运动能力和认知方面的要求
  3. 标记任何默认只有一种输入方式或感官能力的故事
  4. 补充缺失的标准——不要另建故事

评估问题

  1. 验收标准是否包含键盘、屏幕阅读器和认知方面的要求?
  2. 无障碍标准是否属于完成定义的一部分?
  3. 是否已检查每个故事中关于能力的假设?
  4. 是否存在只能通过一种输入方式操作的故事?

评论

支持 Markdown