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.

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(),
]