Audit Component Accessibility Using Storybook

Erin Doyle
InstructorErin Doyle
Share this video with your friends

Social Share Links

Send Tweet
Published 3 years ago
Updated 2 years ago

Building a component library is a great way to gain efficiencies in creating accessible React apps and Storybook is a great tool for doing that. Using the accessibility add-on to Storybook you can test your components in isolation for accessibility issues before composing them into an application.

If you can write and test each of these components initially with accessibility in mind then you now have:

  • A library of reusable components with accessibility baked in.
  • You won’t need to solve the same problems over and over again.



Instructor: [0:00] To install the Storybook add-on, we'll need to npm install or yarn add the npm package to our development dependencies. Then, to enable the add-on, we'll need to add it to our Storybook config in the main.js file within the .storybook directory. You'll just need to add it to this array of add-ons.

[0:26] Now, let's see the add-on in action in our Storybook. Here's a story I've written with an example form. We've got some form inputs and some buttons. Over here, in the add-ons panel, we now have a tab here for accessibility. We click on that and it's already run tests on this Story.

[0:48] We've got two violations here. We can expand them to learn more about them. Each violation will list what the test criteria was, how that test criteria was violated, and it'll list each element that violates the test criteria.

[1:07] For this one, we've just got this one button. Down here, we have an input and a text area that are violating this test. If you click to Highlight the Results, it'll highlight in the Story, the actual element that is violating the test. For each of the elements that violate the test, it lists more details about exactly how it was violated, and suggestions on how to fix.

[1:41] Finally, there are links to more info, which takes you to Deque University, and gives you a plethora of details about this issue.

[1:53] Let's fix these errors and come back and test again, and see what our results look like. We had two violations. If we refresh this, the tests are run again. We no longer have any violations.

~ 30 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today