Audit Component Accessibility Using Storybook
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.
Resources
- https://storybook.js.org/
- https://www.npmjs.com/package/@storybook/addon-a11y
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.