Vue Academy · 课时

Storybook 插件与可访问性测试

@storybook/addon-a11y、viewport addon，以及用于自动生成文档的 docs addon

Storybook 插件与可访问性测试 是 CoddyKit 上的免费 Vue Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

使用插件扩展 Storybook

插件会将额外的面板和工具接入 Storybook。除了控制面板和操作之外，插件还涵盖无障碍、响应式视口和自动生成的文档。

无障碍插件

@storybook/addon-a11y 会在每个故事上运行 axe-core 引擎，并在面板中直接报告 WCAG 违规问题，例如对比度问题、缺少标签和错误角色。

// terminal
// npm install -D @storybook/addon-a11y

注册插件

将插件添加到 .storybook/main.ts 中的 addons 数组。重启 Storybook 以加载它。

// .storybook/main.ts
const config = {
  addons: [
    "@storybook/addon-essentials",
    "@storybook/addon-a11y",
  ],
}

阅读无障碍面板

打开一个故事并检查“无障碍”选项卡。每项结果都会分类显示：违规（必须修复）、通过和未完成（需要手动检查）。点击某项违规问题即可突出显示对应元素。

它能发现的常见违规问题

文本与背景之间的颜色对比度不足。
按钮或链接缺少可访问名称。
图片缺少 alt 文本。
表单输入框没有关联的标签。

在隔离环境中发现这些问题，远比发布后再修复便宜。

每个故事的无障碍配置

您可以通过参数按故事调整规则，例如停用由其他地方处理的规则，或标记要跳过的元素。

export const NoContrastCheck = {
  parameters: {
    a11y: {
      config: {
        rules: [{ id: "color-contrast", enabled: false }],
      },
    },
  },
}

视口插件

视口插件（属于基础插件）允许您在不同设备尺寸下预览故事，包括移动设备、平板电脑和桌面设备，以验证响应式断点。

选择视口

工具栏下拉菜单会将画布切换为预设的设备框架。您也可以为每个故事设置默认视口。

export const Mobile = {
  parameters: {
    viewport: { defaultViewport: "mobile1" },
  },
}

自定义视口

在 preview.ts 中定义您自己的断点，以匹配设计系统的确切宽度。

// .storybook/preview.ts
const preview = {
  parameters: {
    viewport: {
      viewports: {
        tablet: { name: "Tablet", styles: { width: "768px", height: "1024px" } },
      },
    },
  },
}

文档插件

@storybook/addon-docs 为自动生成的文档提供支持。结合 tags: ["autodocs"] 后，它会根据属性和故事为每个组件生成文档页面。

export default {
  component: Card,
  tags: ["autodocs"],
}

始终保持最新的文档

由于文档是根据真实组件和故事生成的，因此不会逐渐过时。属性表反映实际的属性定义，示例则是实时故事。

快速检查

检查您对 Storybook 插件的理解。

回顾

您学习了重要的 Storybook 插件：

@storybook/addon-a11y 会按故事报告 WCAG 违规问题（对比度、标签和角色），并且可以按故事进行调整。
视口插件通过预设或自定义尺寸预览响应式断点。
@storybook/addon-docs 配合 tags: ["autodocs"]，会根据属性和故事自动生成始终保持最新的文档。
在 main.ts 的 addons 数组中注册插件。

常见问题解答

「Storybook 插件与可访问性测试」课时是免费的吗？

是的 — 「Storybook 插件与可访问性测试」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「Storybook 插件与可访问性测试」这节课中我会学到什么？

@storybook/addon-a11y、viewport addon，以及用于自动生成文档的 docs addon 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「Storybook 插件与可访问性测试」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy