♿ Accessibility in React

Accessibility (a11y) ensures that your app is usable by people with disabilities, using screen readers, keyboard navigation, or assistive technologies. Here's how to build accessible React apps.

🔤 1. Use Semantic HTML

• Use proper tags: <header>, <nav>, <main>, <footer>
• Use headings (h1–h6) in logical order
• Avoid using <div> or <span> for interactive elements

🔍 2. ARIA Roles and Labels

Use ARIA attributes only when semantic HTML is not enough:

• aria-label — custom labels for buttons, inputs
• aria-hidden — hide elements from screen readers
• role="dialog" — define modal dialogs

⌨️ 3. Keyboard Navigation

• Ensure all buttons, links, and forms are focusable
• Use tabIndex to manage focus order when needed
• Handle onKeyDown for interactive custom elements

📝 4. Accessible Forms

• Always link <label> to its input using htmlFor
• Use aria-describedby for help or error messages
• Ensure proper keyboard and screen reader flow

🖼️ 5. Accessible Images

• Use descriptive alt text
• Use role="presentation" or alt="" for decorative images

🧰 6. Tools for Testing Accessibility

• WAVE – Web accessibility evaluation tool
• axe DevTools – Chrome extension by Deque
• @testing-library/jest-dom – Includes a11y matchers for testing

✅ 7. Bonus Tips

• Use motion responsibly (add prefers-reduced-motion)
• Test using screen readers like NVDA, VoiceOver
• Always test your UI with keyboard alone (Tab, Enter, Esc)