Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @storybook/addon-a11y with all npm packages installed. Try it out:

var addonA11y = require("@storybook/addon-a11y")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@storybook/addon-a11y v5.3.17

a11y addon for storybook

storybook-addon-a11y

This storybook addon can be helpful to make your UI components more accessible.

Framework Support

Screenshot

Getting started

First, install the addon.

$ yarn add @storybook/addon-a11y --dev

Add this line to your main.js file (create this file inside your storybook config directory if needed).

module.exports = {
  addons: ['@storybook/addon-a11y/register']
}

import the withA11y decorator to check your stories for violations within your components.

import React from 'react';

import { withA11y } from '@storybook/addon-a11y';

export default {
  title: 'button',
  decorators: [withA11y],
};

export const accessible = () => (
  <button>
    Accessible button
  </button>
);

export const inaccessible = () => (
  <button style={{ backgroundColor: 'red', color: 'darkRed', }}>
    Inaccessible button
  </button>
);

Parameters

For more customizability use parameters to configure aXe options. You can override these options at story level too.

import React from 'react';
import { storiesOf, addDecorator, addParameters } from '@storybook/react';

import { withA11y } from '@storybook/addon-a11y';

export default {
  title: 'button',
  decorators: [withA11y],
  parameters: {
    a11y: {
      // optional selector which element to inspect
      element: '#root',
      // axe-core configurationOptions (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#parameters-1)
      config: {},
      // axe-core optionsParameter (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter)
      options: {},
    },
  },
};

export const accessible = () => (
  <button>
    Accessible button
  </button>
);

export const inaccessible = () => (
  <button style={{ backgroundColor: 'red', color: 'darkRed', }}>
    Inaccessible button
  </button>
);

Roadmap

  • Make UI accessible
  • Show in story where violations are.
  • Add more example tests
  • Add tests
  • Make CI integration possible
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free