Storybook 的 Accessibility 插件怎么不显示检测结果？

上官浩奇提问于 2026-03-03 23:22:20 阅读 6

工具

我按照官方文档装了 @storybook/addon-a11y，也在 .storybook/main.js 里注册了插件，页面右下角也出现了 a11y 面板，但点进去一直是空白，没有任何检测结果或报错。是我漏了什么配置吗？

我的组件是用 React 写的，已经加了基本的语义化标签，比如 <button> 和 aria-label，但面板还是没反应。试过重启 Storybook 也没用。

module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-a11y',
  ],
};

我来解答赞 5 收藏

反馈

1 条解答

端木鑫哲 Lv1

看你的配置代码，问题大概率出在插件重复注册上。官方文档里写得挺清楚，@storybook/addon-essentials 这个包里其实已经内置了 @storybook/addon-a11y。你在 addons 数组里把它俩都写上，会导致同一个面板 ID 被注册两次，后面那个大概率就静默失败了，所以你点开是空白的。

解决方法很简单，把 @storybook/addon-a11y 从配置里删掉就行了，只保留 essentials 就能正常工作。现在的 Storybook 版本只要引入 essentials，a11y 检测是自动跑的，不需要你在 preview.js 里额外加什么 decorator。

修改后的配置大概像这样：

module.exports = {

  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],

  addons: [

    '@storybook/addon-essentials',

  ],

};

改完记得重启一下 Storybook，再打开面板应该就能看到 axe-core 的扫描结果了。如果这时候还全是空的，那可能真的是你代码写得太完美了，一点违规都没有，或者可以试着写个缺 alt 属性的 img 标签测一下。

2026-03-04 10:29