前端团队的可访问性管道
Storybook 9 如何将可访问性集成到开发生命周期的每个部分
传统的无障碍测试未能跟上现代开发的步伐。一些团队手动审计少量页面以生成 VPAT 报告（效率低下）。另一些团队则在核心用户流程上运行自动化测试（覆盖率低）。
开发者最终对无障碍负责，因为我们的代码会受到用户、审计师和监管机构的严格审查。但目前还没有能够提供快速反馈和高覆盖率的工作流程。
Storybook 9 改变了这一切，它将无障碍功能集成到开发周期的每个阶段，从本地到 CI 再到团队签核。此外，我们还将推出新服务来管理和优先处理已存在的无障碍债务。
为什么无障碍测试会使前端团队失败
开发者检查无障碍功能的方式与应用程序的构建方式脱节。我们与 Shopify、Indeed、Square 以及 Storybook 社区的团队进行了交流。每个人都遇到了同样的障碍：
- 覆盖率低：审计只触及少量屏幕
- 反馈慢：结果太晚才出现，没有实际价值
- 结果噪音大：跨页面反复报告相同的违规行为
这些问题浪费了开发者的时间，并削弱了对您无障碍计划的信任。结果呢？无障碍功能最终被排除在开发生命周期之外。
如何将覆盖率和反馈引入开发周期
传统的自动化无障碍测试方法是使用端到端 (E2E) 框架模拟用户流程。这意味着启动您的完整应用程序，浏览页面，并寄希望于结果稳定。但它们很少能稳定。
任何一个不稳定的 API 或上游加载延迟，都会导致无障碍测试失败，而这些失败与前端无关。这种工作流程与手动审计相差无几。
Storybook 采取了不同的方法。它使用模拟数据和参数单独渲染组件——无需完整应用程序，无需后端，无需不稳定性。您构建原子组件并将其组合成页面，通过编写 story 来捕获关键状态。每个 story 都是一个自动检查无障碍违规行为的独立测试。
其结果是在开发过程中提供快速、稳定的反馈，并在 CI 中实现符合审计要求的覆盖率。您可以在源头——组件——捕获问题。让我们一步一步来看它是如何工作的：
1. 快速发现问题
重新设计的无障碍插件会在您构建 UI 时自动检查 WCAG 2.1 AA 违规（可自定义为不同的合规级别）。问题按规则分组，按严重性排序，因此您可以快速优先处理影响最大的问题。
点击任何违规项即可在画布中高亮显示相应的 DOM 节点。无需猜测，无需深入 DOM 查找。
可靠性设计。无不稳定性。
9.0 版本通过渲染检测启发式方法进一步提高了无障碍测试结果的稳定性。我们的算法会监视 document.getAnimations() 以检测 UI 何时完成渲染。这对于带有动画和加载状态的交互式组件至关重要。
2. 更快地修复违规
每次违规都包含可操作的提示，帮助您修复它——外加相关的元素和选择器，方便快速检查。
通过永久链接邀请专家
无障碍功能并非完全自动化。某些规则需要人工判断——尤其是在语义、标签和键盘交互方面。
Storybook 可以轻松地将无障碍专家、设计师和项目经理纳入审查流程。每个 story 都有一个唯一的永久链接，可以在他们的浏览器中重现精确的组件状态。对于本地 Storybook，它会复制 localhost 地址。对于已发布的 Storybook，这是一个公共 URL，您的任何团队成员都可以访问。
这意味着专家可以直接跳转到他们需要验证的确切 UI 状态——无需设置，无需来回沟通。
3. 每次代码更改都能获得即时反馈
当您在编辑器中更新组件时，Storybook 会为当前选定的 story 和任何相关组件（通过监视模式）重新运行无障碍测试。这确保了每个修复都能自动得到验证。
4. 在 CI 中自动测试无障碍
并非所有问题都能在开发过程中被发现。因此，Storybook 还在 CI 中对每次拉取请求运行无障碍检查。这充当了前端的安全网——如果一个 bug 在本地开发中被遗漏，它就不会进入 main 分支。
在底层，Storybook 基于 Vitest 构建，能够与您现有的单元测试套件一起运行快速、确定性的无障碍检查。
升级：使用 Chromatic 跟踪无障碍债务随时间的变化
包括 Storybook Test 的 CLI 在内的大多数 CI 工具都旨在显示所有违规行为。这对于几乎没有违规的全新项目来说很棒，但当您继承了无障碍债务时，它就会变得杂乱无章，因为不可能知道什么是新的，什么是遗留的。
为了解决这个问题，我们在 Chromatic（由 Storybook 维护者提供的云服务）中内置了无障碍回归测试。它为您的 Storybook 中的每个 story 设置一个基线，然后将新构建与该基线进行比较，仅标记新出现或已更改的问题。
这有助于您的团队在不不知不觉中增加更多债务的情况下持续交付。
5. 向利益相关者提供合规性报告
Chromatic 还会生成覆盖您整个 Storybook 的无障碍报告。这些报告按组件突出显示 WCAG 违规——因此您可以优先处理影响重大的修复，例如出现在数十个页面上的损坏的 Button。
将其视为 VPAT 流程的报告生成助手。开发人员使用 Chromatic 快速解决可操作的问题，使无障碍专家能够专注于处理需要细微判断的违规。
您的无障碍管道
| 阶段 | 工具 | 价值 |
|---|---|---|
| 开发 | Storybook Test (a11y 插件) | 即时发现和修复问题。在高亮显示画布中的失败节点。共享永久链接以进行异步审查。 |
| CI | Storybook Test 和 Chromatic | 使用 Storybook 的 CLI 在 CI 中运行所有 story 的无障碍检查。切换到 Chromatic 以添加回归跟踪，以检测新/已更改的违规。 |
| 审查与报告 | Chromatic 报告 + VPAT | 按组件监控违规并随时间跟踪更改。帮助开发人员优先处理修复，同时使审计人员能够验证棘手的情况并准备 VPAT 文档。 |
始终在线的无障碍合规性
如果您已经在使用 Storybook 构建组件，那么您已经完成了一大半。现在，这些相同的 story 在开发期间、CI 中以及其他方面为您提供了完整的无障碍覆盖。
有了 Storybook 9，无障碍功能从第一个提交开始就已融入您的工作流程。在新项目中试试吧。
npm create storybook@latest
如果您已经有一个现有的 Storybook 项目，请先将其升级到 Storybook 9。使用我们的自动化迁移向导来帮助您完成整个过程
npx storybook@latest upgrade
我们还创建了一个迁移指南，以帮助您填补空白。