PricingLoginStart free
Vue Academy · Lesson

Storybook Addons and Accessibility Testing

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

Lesson 4 of 413 steps

Storybook Addons and Accessibility Testing is a free Vue Academy lesson on CoddyKit. This is lesson 4 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, and your progress syncs across the web and the CoddyKit app. The Vue Academy course includes 4 lessons in total.

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.

Answer it in the interactive lesson

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.
Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses
42
Lessons
156
Start learning freeView the full course

Frequently Asked Questions

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

Yes — any 3 lessons of the Vue Academy learning path, including “Storybook Addons and Accessibility Testing”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Vue Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.

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