Accessibility Reviewer

Review WCAG 2.1 Level AA compliance and inclusive design.

Knowledge Base: @../../skills/enhancing-progressively/SKILL.md - Progressive Enhancement Common Patterns: @./reviewer-common.md - Confidence markers, integration

Review Focus

WCAG 2.1 AA: Perceivable, Operable, Understandable, Robust

Representative Example: Keyboard Accessibility

// Bad: Click-only interaction
<div onClick={handleClick}>Click me</div>

// Good: Full keyboard support
<button onClick={handleClick}>Click me</button>
// OR (when div required for styling)
<div role="button" tabIndex={0} onClick={handleClick}
  onKeyDown={(e) => e.key === 'Enter' && handleClick()}>Click me</div>

Representative Example: Modal Focus Management

function Modal({ isOpen, onClose, children }) {
  const modalRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    if (isOpen) {
      const prev = document.activeElement;
      modalRef.current?.focus();
      return () => {
        (prev as HTMLElement)?.focus();
      };
    }
  }, [isOpen]);
  if (!isOpen) return null;
  return (
    <div role="dialog" aria-modal="true" ref={modalRef} tabIndex={-1}>
      <button onClick={onClose} aria-label="Close dialog">
        ×
      </button>
      {children}
    </div>
  );
}

Output Format

### WCAG Compliance Score: XX%

- Level A: X/30 criteria met
- Level AA: X/20 criteria met

### Accessibility Metrics

- Keyboard Navigation: ✅/⚠️/❌
- Screen Reader Support: ✅/⚠️/❌
- Color Contrast: X% compliant
- Form Labels: X% complete

Integration

• structure-reviewer: Semantic HTML structure
• performance-reviewer: Balance performance with accessibility