STOP fighting accessibility | automate a11y checks

What if testing components for accessibility violations were as simple as linting them for syntax errors. Would you give it a shot?

▬ Chapters ▬▬▬▬▬▬▬▬▬▬

00:00:00 Automate Accessibility Tests!
00:00:26 What we cover…
00:00:56 Add axe-playwright and test-runner
00:01:50 Read and fix a11y violations
00:03:25 Add storybook-addon-a11y to Storybook
00:04:21 Next steps…

▬ Links and resources ▬▬▬▬▬▬▬▬▬▬

▬ Follow us! ▬▬▬▬▬▬▬▬▬▬

Follow @chantastic on:
- youtube: @chantastic

▬ Learn more ▬▬▬▬▬▬▬▬▬▬

▬ Free Storybook hosting ▬▬▬▬▬▬▬▬▬▬

Chromatic is made by Storybook maintainers and sets up in just 2 minutes.

[chromaticui]

Storybook 7 users. Note that the new storybook root is not `#root` but `#storybook-root`.

Thank you Brian Walters for pointing this out!

[BrianWalters-bl]

Hey guys, the example code didn't work for me, but I figured out the issue. I got this error for axe:

page.evaluate: Error: No elements found for include in page Context

And it's because there is no element with the id "root" in my stories. I had to change the second argument of the checkA11y call to be "#storybook-root" instead.

I'm using Storybook ^7.0, so maybe this was changed in the major version. Hope this helps someone.