Accessibility और Best Practices

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 करें।

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 बनाएँ।

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