This package has been deprecated

Author message:

Package has been renamed to @chanzuckerberg/axe-storybook-testing


1.1.0 • Public • Published


Package Status Tests

Command-line interface for running accessibility checks via axe-core on your Storybook stories.

If there are any violations, information about them will be printed and the command will exit with a non-zero exit code. That way, you can use this as automated accessibility tests on CI.

Originally based on @percy/storybook.

Project goals

These will be used to determine development work and direction, and triage bugs and pull requests.

  1. Run axe-core on Storybook stories written in Component Story Format.
  2. Be human readable on local machines (in other words, useful outside of a CI).
  3. Have reasonable performance. It doesn't have to maximize speed in every possible way, but needs to be fast enough that people will actually use it.
  4. Allow configuration of axe rules, so that people can fit the tool to their needs.


First, install the package

# via npm
npm install --save-dev @chanzuckerberg/axe-storybook

# or, if using Yarn
yarn add --dev @chanzuckerberg/axe-storybook

Second, add a script to your package.json that executes Storybook's build-storybook command and runs axe-storybook

// In package.json
"scripts": {
  "storybook:axe": "build-storybook && axe-storybook"


Assuming you've added the script in the install section above, you'll run this application with

# If using npm
npm run storybook:axe

# or, if using Yarn
yarn storybook:axe


The command-line interface has the following options.

Option Default Type Description
--browser chromium chromium, firefox, or webkit Which browser to run the tests in.
--build-dir storybook-static string Storybook static build directory.
--headless true boolean Whether to run headlessly or not.

For example, to run non-headlessly on Firefox, you would run

# If using npm
npm run storybook:axe -- --headless false --browser firefox

# or, if using Yarn
yarn storybook:axe --headless false --browser firefox

Configuring stories

Stories can use parameters to configure how axe-storybook handles them.


Prevent axe-storybook from running a story by using the disabled parameter.

SomeStory.parameters = {
  axe: {
    disabled: true,


Prevent axe-storybook from running specific Axe rules on a story by using the disabledRules parameter.

SomeStory.parameters = {
  axe: {
    disabledRules: ['select-name'],




Package Sidebar


npm i @chanzuckerberg/axe-storybook

Weekly Downloads






Unpacked Size

21.8 kB

Total Files


Last publish


  • andremalan
  • ademartini-czi
  • muggleborn
  • tzchang
  • booc0mtaco
  • girishczi
  • jinlee93
  • ahuth
  • anniehu