react-accessibility-validatorlisted

# Accessibility Validator Auto-enforces WCAG 2.1 AA accessibility standards for all React/Next.js components. ## Activation Triggers This skill activates when: - Creating React/Next.js components - Building forms, buttons, modals, navigation - Adding interactive elements - Mentioning "component", "UI", "form", "button" - Creating pages or layouts - Working on user-facing features ## WCAG 2.1 AA Requirements (MANDATORY) All components MUST meet: - ✅ **Keyboard navigation** - All interactive elements focusable and usable via keyboard - ✅ **Semantic HTML** - Proper HTML elements and ARIA attributes - ✅ **Color contrast** - 4.5:1 for normal text, 3:1 for large text - ✅ **Screen reader support** - All content accessible to assistive technologies - ✅ **Focus management** - Visible focus indicators, logical tab order - ✅ **Form accessibility** - Labels, error announcements, help text ## Auto-Validation Process ### Step 1: Detect Component Creation When detecting component being written: ```tsx // Component without accessibility function LoginButton({ onClick }) { return <div onClick={onClick}>Login</div> // ❌ Multiple issues! } ``` ### Step 2: Run Accessibility Checklist Verify: 1. ❌ Using div instead of button (semantic HTML) 2. ❌ No keyboard support (only onClick, no onKeyDown) 3. ❌ Not focusable (div not in tab order) 4. ❌ No ARIA attributes 5. ❌ No focus styles ### Step 3: Auto-Fix Violations **Before (Inaccessible):** ```tsx function LoginButton({ onClick }) {