@storybook/addon-a11y
Advanced tools
The @storybook/addon-a11y package is an addon for Storybook that helps you improve the accessibility of your UI components. It integrates with Storybook to provide automated checks and manual testing tools for accessibility issues, allowing developers to ensure their components are accessible to as many users as possible.
Automated accessibility checks
Automatically run accessibility checks on your components within the Storybook UI. It uses the axe-core library to test each component for accessibility issues and provides a report.
import { withA11y } from '@storybook/addon-a11y';
export default {
title: 'Button',
decorators: [withA11y],
};
export const AccessibleButton = () => <button>Click me</button>;
export const InAccessibleButton = () => <button style={{ color: 'white', backgroundColor: 'white' }}>Can't see me</button>;Manual accessibility testing tools
Provides tools for manual accessibility testing, such as color contrast checkers and keyboard event simulation, to complement the automated checks.
N/ACustomizable rules
Allows customization of the accessibility rules used for testing, enabling or disabling specific rules to tailor the checks to your project's needs.
import { withA11y } from '@storybook/addon-a11y';
export default {
title: 'Button',
decorators: [withA11y],
parameters: {
a11y: {
config: {
rules: [{ id: 'color-contrast', enabled: false }]
}
}
}
};A core library for accessibility testing used by many tools and services, including @storybook/addon-a11y. It can be integrated directly into testing workflows or used as part of other tools.
An ESLint plugin that enforces accessibility rules in JSX elements. Unlike @storybook/addon-a11y, which is used within Storybook, this plugin integrates with the ESLint static code analysis tool to catch accessibility issues during code linting.
A library that can be used in React applications to audit accessibility in real-time during development. It also uses axe-core under the hood but is used directly in the app rather than in Storybook.
An automated accessibility testing tool that runs in the command line or as part of your build process. It provides a different approach to accessibility testing compared to the Storybook addon, as it can be used for testing entire pages and is not specific to a component development environment.
The @storybook/addon-a11y package provides accessibility testing for Storybook stories. It uses axe-core to run the tests.
npx storybook add @storybook/addon-a11y
8.6.0
The 8.6 release focuses on Storybook Test, which brings realtime component, accessibility, and visual UI tests to your favorite component workshop.
Here’s what’s new:
--yes and fix --features - #30534, thanks @ghengeveld!UniversalStore API to sync state/events between multiple environments - #30445, thanks @JReinhold!node_modules - #30643, thanks @ndelangen!addon-essentials not working when used with getAbsolutePath - #30557, thanks @JReinhold!+page.svelte files - #30369, thanks @xeho91!vitest.config.ts with workspaces, otherwise create vitest.workspace.ts - #30583, thanks @ghengeveld!FAQs
Test component compliance with web accessibility standards
The npm package @storybook/addon-a11y receives a total of 1,796,263 weekly downloads. As such, @storybook/addon-a11y popularity was classified as popular.
We found that @storybook/addon-a11y demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 12 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket and Seal Security collaborate to fix a critical npm overrides bug, resolving a three-year security issue in the JavaScript ecosystem's most popular package manager.
Security News
TypeScript is porting its compiler to Go, delivering 10x faster builds, lower memory usage, and improved editor performance for a smoother developer experience.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.