react-accessibility-validator

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:

// 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):

function LoginButton({ onClick }) {
  return <div onClick={onClick}>Login</div>
}

After (Accessible):

function LoginButton({ onClick }) {
  return (
    <button
      onClick={onClick}
      type="button"
      className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
    >
      Login
    </button>
  )
}

Step 4: Explain Fixes

Accessibility Violations Fixed

Changes:

1. ✅ Changed <div> to <button> (semantic HTML)
2. ✅ Added type="button" (prevents form submission)
3. ✅ Button is now keyboard accessible (Enter/Space keys work)
4. ✅ Automatically focusable (in tab order)
5. ✅ Added visible focus ring (focus:ring-2)

Why:

• Buttons are natively accessible to keyboard and screen readers
• Focus ring shows keyboard users where they are
• Proper semantics help assistive technologies