Accessibility testing with Storybook.
Accessibility (or a11y — a then 11 characters then y) testing is a type of software testing to ensure that your application is usable by as many people as possible, including people with visual disabilities and other kinds of impairments. Often times, developers don't think about the accessibility of the components they are writing, which can result in, for instance, a payment form which is not accessible by screen readers, preventing blind users from buying products in your application!
Having accessible applications is also part of the law in many countries! This is therefore a very important topic and we should think about it always. I know sometimes it's difficult to remember it, but there are tools to help us! Let's go over a couple of them.
The accessibility addon is very famous in the Storybook community. It helps you develop more accessible components by running accessibility tests (based on axe) directly in Storybook, giving hints on what can be improved. This is a great exercise to improve our accessibility skills as well!
Let's add it to our project. We start by installing the addon:
And registering it in
As it's a change in
main.ts, we need to restart Storybook.
That's it, now the addon should be working. It's as simple as that! Now run Storybook, and you should see a new Accessibility tab in the addons panel. Here's how it looks when checking against the
As you make changes to your components, even just by playing with the args, the accessibility tests will rerun and give you insights. As an exercise, let's remove the
alt property from the
RestaurantImage component in the
RestaurantCard.tsx file (you might need to refresh the browser after changing the file):
The greatest fact about this addon is that it not only tells you there are issues but also educates you on how to fix them with helpful links from Deque University. In the end, you become a better developer!