How to Run Accessibility Testing in Storybook With Addon-a11y

Accessibility testing#

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.

Addon-a11y#

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:

xxxxxxxxxx

yarn add -D @storybook/addon-a11y

And registering it in .storybook/main.ts:

xxxxxxxxxx

// main.ts

export default {

  // ... rest of the code

  addons: [

    // ... other addons

    '@storybook/addon-a11y',

  ],

}

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 RestaurantCard component:

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):

xxxxxxxxxx

// src/components/RestaurantCard/RestaurantCard.tsx

// remove the "alt" property from it

<RestaurantImage $isClosed={isClosed} loading="lazy" src={photoUrl} alt="restaurant" /> 

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!