Accessibility feedback in your Storybook

Audit every component for WCAG violations as you develop — directly in the Storybook panel.

Features

Component-level auditing

Each story is audited independently, so you catch issues at the component level before they compound in full pages.

Panel integration

Results appear in a dedicated Storybook panel — violations, impact level, and remediation guidance at a glance.

Element highlighting

Click Highlight on any violation to outline the failing element directly in the preview — no more guessing which element is affected.

Vitest assertions

Use toBeAccessible() in play functions to make accessibility a first-class assertion alongside your component tests.

CI integration

Add the Vitest plugin to get per-story status dots in the sidebar and accessibility results in CI alongside your component tests.

Same rule engine

Quick start

npm install @accesslint/storybook-addon

// .storybook/main.js
export default {
  addons: ["@accesslint/storybook-addon"],
};

Accessibility assertions

Use toBeAccessible() in your play functions to assert that a story has no WCAG violations:

import { expect } from "storybook/test";
import { toBeAccessible } from "@accesslint/storybook-addon/matchers";

export const Default = {
  play: async ({ canvasElement }) => {
    expect.extend({ toBeAccessible });
    await expect(canvasElement).toBeAccessible();
  },
};

Or add the Vitest plugin for automatic registration and CI integration:

// vite.config.ts
import { accesslintTest } from "@accesslint/storybook-addon/vitest-plugin";

plugins: [
  storybookTest({ configDir: ".storybook" }),
  accesslintTest(),
]