Accessibility (WCAG 2.1)
Critical
- Images without alt text
- Icon-only buttons missing aria-labels
- Form inputs without labels
- Non-semantic click handlers (div onClick)
- Links without href
Serious
- Focus outline removed without replacement
- Missing keyboard handlers
- Color-only information
- Touch targets under 44×44px
Moderate
- Skipped heading levels
- Positive tabIndex values
- Role without required attributes
Visual Design
Layout & Spacing
- Inconsistent spacing values
- Overflow and alignment issues
- Z-index conflicts
Typography
- Mixed font families and weights
- Line height issues
- Missing font fallbacks
Color & Contrast
- Contrast ratio below 4.5:1
- Missing hover/focus states
- Dark mode inconsistencies
Components
- Missing button states
- Missing form field states
- Inconsistent borders and shadows
Output
Each issue includes the line number, code snippet, fix suggestion, and WCAG reference.
═══════════════════════════════════════════════════
RAMS DESIGN REVIEW: app/page.tsx
═══════════════════════════════════════════════════
CRITICAL (2 issues)
───────────────────
[A11Y] Line 24: Button missing accessible name
<button><CloseIcon /></button>
Fix: Add aria-label="Close"
WCAG: 4.1.2
SERIOUS (1 issue)
─────────────────
[A11Y] Line 48: Focus outline removed
className="outline-none"
Fix: Add focus-visible:ring-2
WCAG: 2.4.7
═══════════════════════════════════════════════════
SUMMARY: 2 critical, 1 serious, 0 moderate
Score: 68/100
═══════════════════════════════════════════════════
Usage
/rams — ask which files to review
/rams src/App.tsx — review specific file