Accessibility

[00:00:00]
>> What I would like you to do is go add one more add-on. This is the last add-on, I believe. I could be mistaken, but I think this is the last add-on, and this is going to be called, Add-on accessibilities. So npm install @storybook/addon-811y accessibility. Of course, while this is loading, let's go add this to our array here.

[00:00:28]
@storybook/addon-a11y/register. Again, we need to register this add-on. What's the next step? What do we have to do after we put this in our add-ons array? We do one more thing, just to tell storybook, hey, we need to add this.
>> Decorator?
>> Decorators, in preview.js, let's add one more decorator.

[00:00:55]
So import withA11y from @storybook/addon-a11y. This one's, again, very simple, just simply addDecorator withA11y. So this one might need a refresh. Let me restart my server. So if your add-ons are not appearing in your storybook, just go ahead and stop and restart your dev server. That should take care of it.

[00:01:28]
If there's an error, you'll see that in your terminal, but it should work. Okay, so when I stopped and restarted my server, you can see now on the bottom here, alongside Knobs and Actions, I have a third tab called Accessibility. When you click on this, you should be able to see if you have any violations, any incomplete, or any passes.

[00:01:46]
So you can look through these. This a lot about attributes. If we check out our Buttons, for example, we can see those are a little simpler but they all pass. So this is a really great and easy tool that you can use for checking accessibility. But, again, I wouldn't have this as the only tool that you use.

[00:02:01]
I would actually, if you have someone who's really knowledgeable about accessibility, maybe just check with them. Actually having someone who is an accessibility expert part of your core team when you're making design systems is invaluable, very, very helpful. But there are other tools that you can use as well, which we'll have linked on the website that you can use to learn about accessibility.