Accessibility (a11y) best practices for React components. Use when creating UI components, forms, interactive elements, or reviewing code for accessibility compliance.

Accessibility Best Practices Accessibility patterns for building inclusive React applications following WCAG standards. Contains 7 rules across 4 categories focused on semantic HTML, screen reader support, keyboard navigation, and user preferences. When to Apply Reference these guidelines when: Creating new UI components Building forms and interactive elements Adding dynamic content or notifications Implementing navigation patterns Reviewing code for accessibility Rules Summary Semantic HTML & Structure (HIGH) semantic html landmarks @rules/semantic html landmarks.md Use semantic HTML elements for page structure. Screen Readers (MEDIUM) screen reader sr only @rules/screen reader sr only.md Use sr only class for visually hidden text. aria live regions @rules/aria live regions.md Announce dynamic content changes to screen readers. Keyboard & Focus (HIGH) keyboard navigation @rules/keyboard navigation.md Use semantic elements for built in keyboard support. focus management @rules/focus management.md Show visible focus indicators and trap focus in modals. User Preferences (MEDIUM) reduced motion @rules/reduced motion.md Respect prefers reduced motion setting. touch targets @rules/touch targets.md Ensure 44x44px minimum touch targets. Key Files app/components/heading.tsx Region, Heading, Main components app/hooks/use prefers reduced motion.ts Reduced motion hook app/components/field/field.tsx Accessible form field component

frontend-accessibility-best-practices