# Accessibility and Best Practices — Storybook

Source: https://www.geekswithgeeks.com/en/storybook/sb-accessibility

> Test components for accessibility using Storybook's a11y addon.

## 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`.

```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.

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