抢先看：可访问性插件 (Accessibility Addon) 更新

随着《欧洲无障碍法案》等新法案将于 2025 年 6 月生效，团队正争先恐后地确保其用户界面可访问。Storybook 将加速您的 WCAG 合规之路。

我很高兴分享 Storybook 9 升级后的可访问性工作流程的抢先预览，包括重新设计的插件、CI 中的自动化检查等等。

您还有机会注册 Chromatic 的 可访问性回归测试 的早期访问权限 — 这是一款与 Storybook 集成的新工具，可帮助您管理可访问性债务并防止新的违规行为。

可访问性插件的新功能

重新设计的布局

该插件现在按规则分组显示可访问性违规，并在每个规则下方列出相关元素。

不再是杂乱、扁平的违规列表，取而代之的是结构化的细分。快速浏览失败的规则，然后深入了解特定元素。

在画布中突出显示问题

单击任何违规项，即可在画布中突出显示相应的 DOM 节点。调试变得可视化且交互式 — 您不再需要费力地寻找选择器来确定问题所在。

该插件将问题置于上下文中，让您在可访问性故障旁边看到渲染的 UI。这意味着可以更快地修复问题，减少在不同工具之间切换的麻烦。

共享规则和元素的永久链接

每个违规项现在都有一个唯一的、可共享的永久链接。可访问性是一项团队运动 — 这些链接可以轻松地将您团队的内部专家、设计师或产品经理纳入进来。

共享已发布 Storybook 中任何问题的直接链接，其中包含渲染的 UI 和上下文。这对于调试异步问题的分布式团队尤其有用。

在插件中重新运行可访问性测试

现在有一个“重新运行”按钮可手动触发测试。这对于具有状态的用户界面或会修改外观的交互尤其有用 — 在这些情况下，首次渲染并非最终状态。

在 Storybook Test 中自动运行

Storybook Test 是 9.0 版本（2025 年 5 月）中的一项新功能，可一次性运行功能、覆盖率和可访问性测试。单击固定在侧边栏底部的测试小部件，即可在开发过程中测试每个 story。

此外，Storybook Test 在 CI 中运行，为您的团队提供另一层保护。您已经依赖 story 来表达组件状态 — 现在它们还可以作为可访问性测试用例。

Chromatic 中的可访问性回归测试

经过改进的插件为 可访问性回归测试 奠定了基础，这是 Chromatic 的一项新功能，可跟踪可访问性违规随时间的变化，并防止回归悄悄潜入您的拉取请求。这一点很重要，因为大多数团队的可访问性债务无法一次性修复，他们需要一种方法来继续发布而不会增加更多债务。

虽然 Storybook 帮助开发人员在开发过程中进行抽查，但 Chromatic 为您的整个团队提供了全面的覆盖。它为每个 story 建立了可访问性基线 — 因此您可以区分预先存在的问题和您刚刚引入的问题。

每次推送代码时，Chromatic 都会在您的整个 Storybook 中自动运行可访问性检查。它会将当前违规行为与基线进行比较。如果存在任何新的或已更改的问题，它们将被标记出来进行审查。

将 Chromatic 与 Storybook 配对，使可访问性成为一个持续的反馈循环。Chromatic 保护您的团队免受回归，而 Storybook 使您能够处理和修复单个违规行为。这可以确保您永远不会退步 — 即使您的应用程序不断增长，更多的利益相关者加入流程。

何时可以尝试？

Storybook 9 将于 2025 年 5 月发布，并附带经过改进的可访问性插件。在下面的 Storybook 邮件列表中注册，即可在未来几周内收到所有可访问性工作流程更新的通知。

Chromatic 的可访问性回归测试将于 4 月进入 beta 版。立即注册以获得早期访问权限。