Skip to content
Branch: master
Find file History
Pull request Compare This branch is 106 commits ahead, 1119 commits behind next.
Latest commit e211b37 Jun 19, 2019
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
docs Initial commit Nov 11, 2017
src Update snapshots May 16, 2019
README.md Github org rename to storybookjs Jun 3, 2019
package.json v5.1.9 Jun 20, 2019
register.js REFACTOR a11y addon && FIX issues with decorators reloading Dec 10, 2018
tsconfig.json chore: add tsconfig in addons/a11y Mar 7, 2019

README.md

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 addons.js file (create this file inside your storybook config directory if needed).

import '@storybook/addon-a11y/register';

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

import React from 'react';
import { storiesOf, addDecorator } from '@storybook/react';
import { withA11y } from '@storybook/addon-a11y';

// should only be added once
// best place is in config.js
addDecorator(withA11y)

storiesOf('button', module)
  .add('Accessible', () => (
    <button>
      Accessible button
    </button>
  ))
  .add('Inaccessible', () => (
    <button style={{ backgroundColor: 'red', color: 'darkRed', }}>
      Inaccessible button
    </button>
  ));

For more customizability. Use the addParameters function 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';

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

storiesOf('button', module)
  .add('Accessible', () => (
    <button style={{ backgroundColor: 'black', color: 'white', }}>
      Accessible button
    </button>
  ))
  .add('Inaccessible', () => (
    <button style={{ backgroundColor: 'black', color: 'black', }}>
      Inaccessible button
    </button>
  ));

Roadmap

  • Make UI accessibile
  • Show in story where violations are.
  • Add more example tests
  • Add tests
  • Make CI integration possible
You can’t perform that action at this time.