Lesson 10 / 25

Accessibility and Best Practices

Catch accessibility violations early with the Storybook a11y addon and build components with semantic HTML and ARIA.

A11y addon overview

The a11y addon automatically checks your components for common accessibility violations like missing labels, contrast issues, and ARIA misuse.

Enabling the a11y addon

Install and configure the a11y addon in .storybook/main.ts.

import type { StorybookConfig } from '@storybook/react-webpack5';

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.tsx'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-a11y',
  ],
  framework: '@storybook/react-webpack5',
};

export default config;

Common accessibility patterns

Ensure components use semantic HTML, proper ARIA labels, keyboard navigation, and sufficient color contrast.

Accessible component example

Build components with proper accessibility from the start.

<button
  aria-label="Close dialog"
  onClick={onClose}
  className="focus:outline-2"
>
  ×
</button>