This document outlines a technical review system, "RAMS DESIGN REVIEW," designed to evaluate web application source code for adherence to accessibility (WCAG 2.1) and visual design standards.

The core methodology involves a static analysis process that scans code, such as JSX/TSX files (e.g., app/page.tsx), to identify deviations from predefined best practices. Issues are systematically categorized by severity: Critical, Serious, and Moderate.

Accessibility (WCAG 2.1) Checks:

• Critical issues identified include $<img>$ elements lacking alt text, icon-only $<button>$ elements missing aria-label attributes for semantic meaning, form inputs ($<input>$, $<textarea>$, $<select>$) without associated $<label>$ elements, non-semantic DOM elements (e.g., $<div>$) used with onClick handlers, and $<a>$ (anchor) elements without an href attribute.
• Serious issues encompass instances where the default browser focus outline is suppressed (e.g., using outline-none) without a suitable replacement, absence of keyboard event handlers for interactive components, conveying information solely through color, and touch targets (interactive elements) smaller than the recommended 44x44px.
• Moderate issues include skipped heading levels ($<h1>$ followed by $<h3>$ without $<h2>$), positive tabIndex values which disrupt natural tab order, and ARIA role attributes used without their required accompanying attributes.

Visual Design Checks:

• Layout & Spacing issues include inconsistent spacing values across components, overflow and alignment discrepancies, and CSS z-index conflicts.
• Typography concerns involve the use of mixed font families and weights, incorrect line height values, and missing font fallbacks in CSS.
• Color & Contrast issues are flagged for contrast ratios below the WCAG 2.1 recommended 4.5:1, absent hover or focus states for interactive elements, and inconsistencies in dark mode implementations.
• Components checks look for missing states for buttons and form fields (e.g., :hover, :focus, :active, :disabled), and inconsistent application of borders and shadows.

For each identified issue, the system generates a detailed output that includes:

1. The specific line number in the source file where the issue occurs.
2. The exact code snippet responsible for the violation.
3. A prescriptive fix suggestion.
4. For accessibility findings, the corresponding WCAG 2.1 success criterion (e.g., 4.1.2, 2.4.7).

An example review for app/page.tsx demonstrated a Critical issue on Line 24: $<button><CloseIcon /></button>$ missing an accessible name, with the fix suggested as $aria-label="Close"$ and reference WCAG 4.1.2. A Serious issue on Line 48 noted a removed focus outline ($className="outline-none"$) with the fix focus-visible:ring-2 and reference WCAG 2.4.7.

The review culminates in a summary count of Critical, Serious, and Moderate issues, and a composite accessibility/design score out of 100 (e.g., 68/100). The tool is invokable via command-line syntax, such as /rams for a general review or $/rams <file_path>$ for specific file analysis.