<aside> ℹ️
Storybook Test has launched and the full documentation is available here: https://storybook.js.org/docs/writing-tests
</aside>
Web accessibility is the practice of making websites and apps accessible and inclusive to all people, regardless of ability or the technology they’re using. That means supporting requirements such as keyboard navigation, screen reader support, sufficient color contrast, etc.
Accessibility is not only the right thing to do, but it is increasingly mandated. For example, the European accessibility act is scheduled to go into law in June 2025. Similarly in the US, laws like the Americans with Disabilities Act (ADA) and Section 508 of the Rehabilitation Act apply to many public-facing services. Many of these laws are based on WCAG, a standardized guideline for making web content accessible.
Accessibility tests audit the rendered DOM against a set of heuristics based on WCAG rules and other industry-accepted best practices. They act as the first line of QA to catch blatant accessibility violations.
Storybook provides an Accessibility (a11y) addon to help ensure the accessibility of your components. It is built on top of Deque’s axe-core library, which automatically catches up to 57% of WCAG issues.
Run this command to install and configure the addon in your project:
npx storybook add @storybook/addon-a11y
<aside> ℹ️
Storybook’s add command automates the addon's installation and setup. To install it manually, see our documentation on how to install addons.
</aside>
Your Storybook will now include some features to check the accessibility of your components, including a button in the toolbar to simulate different vision impairments and an Accessibility addon panel to check for violations.
When you navigate to a story, automated accessibility checks are run and the results are reported in the Accessibility addon panel.
The results are broken down into three sub-tabs:
The addon will run checks for the following sets of rules: