0Pricing
Vue Academy · Lesson

Storybook Addons and Accessibility Testing

@storybook/addon-a11y, viewport addon, docs addon for auto-documentation.

Storybook Addons and Accessibility Testing is a free Vue Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Extending Storybook with Addons

Addons plug extra panels and tools into Storybook. Beyond Controls and Actions, addons cover accessibility, responsive viewports, and auto-generated documentation.

The Accessibility Addon

@storybook/addon-a11y runs the axe-core engine on each story and reports WCAG violations — contrast issues, missing labels, bad roles — right in a panel.

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

Registering an Addon

Add the addon to the addons array in .storybook/main.ts. Restart Storybook to load it.

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

Reading the a11y Panel

Open a story and check the Accessibility tab. Each result is grouped: Violations (must fix), Passes, and Incomplete (needs manual review). Clicking a violation highlights the element.

Common Violations It Catches

  • Insufficient color contrast between text and background.
  • Buttons or links without accessible names.
  • Images missing alt text.
  • Form inputs without associated labels.

Catching these in isolation is far cheaper than after release.

Per-Story a11y Config

You can tune the rules per story via parameters — for example disabling a rule you handle elsewhere, or marking elements to skip.

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

The Viewport Addon

The viewport addon (part of essentials) lets you preview a story at different device sizes — mobile, tablet, desktop — to verify responsive breakpoints.

Choosing a Viewport

A toolbar dropdown switches the canvas to preset device frames. You can also set a default viewport per story.

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

Custom Viewports

Define your own breakpoints in preview.ts to match your design system’s exact widths.

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

The Docs Addon

@storybook/addon-docs powers the auto-generated documentation. Combined with tags: ["autodocs"], it produces a Docs page per component from props and stories.

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

Documentation That Stays Current

Because docs are generated from real components and stories, they cannot drift out of date. Prop tables reflect the actual prop definitions, and examples are the live stories.

Quick Check

Check your understanding of Storybook addons.

Recap

You learned key Storybook addons:

  • @storybook/addon-a11y reports WCAG violations per story (contrast, labels, roles) and can be tuned per story.
  • The viewport addon previews responsive breakpoints with presets or custom sizes.
  • @storybook/addon-docs with tags: ["autodocs"] auto-generates always-current documentation from props and stories.
  • Register addons in the addons array of main.ts.

Frequently asked questions

Is the “Storybook Addons and Accessibility Testing” lesson free?

Yes — the full text of “Storybook Addons and Accessibility Testing” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “Storybook Addons and Accessibility Testing”?

@storybook/addon-a11y, viewport addon, docs addon for auto-documentation. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Storybook Addons and Accessibility Testing” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Setting Up Storybook for Vue 3
  2. Writing Component Stories
  3. Controls, Actions, and Args
  4. Storybook Addons and Accessibility Testing
← Back to Vue Academy