先睹为快：无障碍性（Accessibility）插件焕新升级

随着《欧洲无障碍法案》等即将生效的法律将于 2025 年 6 月生效，各团队正争先恐后地确保其 UI 具有无障碍性。Storybook 可帮助您加快实现 WCAG 合规的进程。

我很高兴能分享 Storybook 9 更新的无障碍性工作流的先睹为快，其中包括重新设计的插件、CI 中的自动化检查等。

您还将有机会注册抢先体验 Chromatic 的无障碍性回归测试——一个与 Storybook 集成的新工具，帮助您管理无障碍性遗留问题并防止新的违规行为出现。

无障碍性插件的新功能

重新设计的布局

该插件现在按规则分组显示无障碍性违规，并在每条规则下列出相应的元素。

不再是嘈杂、平铺的违规列表，您将获得结构化的详细信息。快速浏览失败的规则，然后深入查看特定元素。

在画布中突出显示问题

点击任何违规条目，即可在画布中突出显示相应的 DOM 节点。调试变得可视化且互动性强——您不再需要为寻找选择器而烦恼，就能找出失败的原因。

该插件将问题置于上下文中，在显示无障碍性失败的同时展示渲染的 UI。这意味着更快的修复速度和更少的工具切换烦恼。

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

每条违规条目现在都有一个唯一的、可分享的永久链接。无障碍性是一项团队合作——这些链接使得请您的常驻专家、设计师或产品经理介入变得轻而易举。

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

在插件中重新运行无障碍性测试

现在有一个“重新运行”按钮可以手动触发测试。这对于有状态的 UI 或修改外观的交互特别有用——在这些情况下，首次渲染并不是最终状态。

自动在 Storybook Test 中运行

Storybook Test 是一个将在 9.0 版本（2025 年 5 月）中推出的新功能，它可以一次性运行功能测试、覆盖率测试和无障碍性测试——全部一次完成。点击侧边栏底部固定的测试小部件，在开发过程中测试每个 story。

此外，Storybook Test 在 CI 中运行，为您的团队提供另一层保护。您已经依赖 stories 来表达组件状态——现在它们同时兼作无障碍性测试用例。

Chromatic 中的无障碍性回归测试

经过改进的插件为无障碍性回归测试奠定了基础，这是 Chromatic 的一项新功能，可以跟踪一段时间内的无障碍性违规情况，并防止回归错误悄然进入您的拉取请求。这很重要，因为大多数团队都存在无法一次性解决的无障碍性遗留问题，他们需要一种在不增加更多遗留问题的情况下继续发布的方式。

虽然 Storybook 帮助单个开发者在开发过程中进行抽查，但 Chromatic 为您的整个团队提供了全面的覆盖。它为每个 story 建立了无障碍性基线——这样您就可以区分先前存在的问题和您刚刚引入的问题。

每次您推送代码时，Chromatic 都会自动运行针对您整个 Storybook 中组件的无障碍性检查。它会将当前的违规情况与基线进行比较。如果出现任何新增或更改的问题，它们将被标记以供评审。

将 Chromatic 与 Storybook 结合使用，使无障碍性成为一个持续的反馈循环。Chromatic 保护您的团队免受回归错误的影响，而 Storybook 允许您逐步解决和修复单个违规问题。这确保您永不倒退——即使您的应用程序不断增长，并且有更多的利益相关者加入进来。

我什么时候可以尝试？

Storybook 9 将于 2025 年 5 月发布，届时将包含改进后的无障碍性插件。请在下方注册 Storybook 邮件列表，以便在未来几周内收到所有无障碍性工作流更新的通知。

Chromatic 的无障碍性回归测试将于 4 月进入 Beta 阶段。立即注册抢先体验。