# Accessibility और Best Practices — Storybook

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

> Storybook के a11y addon का use करके components को accessibility के लिए test करें।

## A11y addon overview

A11y addon स्वचालित रूप से आपके components को common accessibility violations जैसे missing labels, contrast issues, और ARIA misuse के लिए check करता है।

## A11y addon को enable करना

`.storybook/main.ts` में a11y addon को install और configure करें।

```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 semantic HTML, proper ARIA labels, keyboard navigation, और sufficient color contrast का use करते हैं।

## Accessible component example

शुरुआत से proper accessibility के साथ components बनाएँ।

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