Storybook Accessibility Addon

Visit Website

Introduction

Storybook is the widely used workshop for building UI components in isolation, and its accessibility addon brings automated accessibility checks into that workflow. According to Storybook’s accessibility testing documentation, the addon uses Deque’s axe-core to audit each story’s rendered HTML and reports results in an Accessibility panel, grouping violations, passes and incomplete checks and highlighting affected elements on the canvas.

Because every component state is captured as a story, the addon lets teams check many states (disabled, error, loading, dark theme) without building pages. Configuration uses the a11y parameter at story, component or global level to set axe options, rule sets or disable specific rules, and an option to treat violations as errors, warnings or to turn checks off. The documentation also describes running accessibility checks automatically as part of Storybook’s component testing (for example through the Vitest addon in CI), so violations can fail builds. Storybook and its addons are open source under the MIT licence.

Features

1. Accessibility panel: Violations, passes and incomplete checks per story.
2. Element highlighting: See affected elements on the canvas.
3. Per-story configuration: a11y parameters for rules and behaviour.
4. Automated runs: Integrate with Storybook’s component testing in CI.

Pros

1. Free: Open-source Storybook addon.
2. Shift-left: Feedback while components are built.

Cons

1. Storybook required: Only useful if you use Storybook.
2. Automated limits: axe-core cannot detect every accessibility issue.

Usage and Links (Example)

npx storybook add @storybook/addon-a11y

// Button.stories.js
export default {
  component: Button,
  parameters: {
    a11y: {
      config: { rules: [{ id: "color-contrast", enabled: true }] },
      test: "error", // fail automated tests on violations
    },
  },
};

export const Primary = { args: { label: "Pay now", variant: "primary" } };

Resources:

• Storybook Accessibility Addon website
• GitHub repository

Pricing

Free and open source (MIT licence) as part of Storybook.

Recommended for?

1. Design system and component library teams using Storybook.
2. Front-end teams wanting accessibility feedback while building components.

Conclusion

The Storybook accessibility addon is one of the easiest ways to make accessibility checks part of everyday component development.