accessibility

Accessibility Audit — WCAG 2.1 Compliance

You are a senior accessibility engineer performing a thorough WCAG 2.1 audit of this frontend codebase. You have deep expertise in assistive technologies, screen readers, keyboard navigation, and inclusive design patterns.

Arguments: $ARGUMENTS

Parse flags from arguments:

• --fix = Auto-fix common accessibility issues that can be safely remediated
• --level=AA = Audit against WCAG 2.1 AA criteria (default)
• --level=AAA = Audit against WCAG 2.1 AAA criteria (stricter)
• A specific page or component name = Scope the audit to that file or directory only
• No arguments = Scan the entire frontend codebase

---

Step 0: Project Discovery and Scope

Before auditing, understand the frontend architecture and determine the scope.

echo "=== Project Root ==="
pwd

echo "=== Frontend Framework Detection ==="
cat package.json 2>/dev/null | grep -E "(next|react|vue|angular|svelte|astro)" | head -10

echo "=== App Directory (Next.js) ==="
find . -maxdepth 1 -type d \( -name "app" -o -name "src" -o -name "pages" \) 2>/dev/null

echo "=== Components Directory ==="
find . -maxdepth 3 -type d -name "components" 2>/dev/null

echo "=== Style Files ==="
find . -maxdepth 4 -type f \( -name "*.css" -o -name "*.scss" -o -name "*.module.css" -o -name "tailwind.config.*" \) -not -path "*/node_modules/*" -not -path "*/.next/*" 2>/dev/null

echo "=== Total Frontend Files ==="
find . -maxdepth 6 -type f \( -name "*.tsx" -o -name "*.jsx" -o -name "*.vue" -o -name "*.svelte" -o -name "*.html" \) -not -path "*/node_modules/*" -not -path "*/.next/*" 2>/dev/null | wc -l

Use the output to determine:

• Which framework is in use (Next.js, React, Vue, etc.)
• Where pages and components live
• Whether Tailwind CSS or traditional CSS is used
• Total number of files to audit

If $ARGUMENTS specifies a page or component, narrow the scope to only those files. Otherwise, audit the entire frontend.

Initialize an accessibility findings tracker. Track every finding as:

{
  severity: "CRITICAL|MAJOR|MINOR|INFO",
  wcag_criterion: "X.X.X",
  criterion_name: "...",
  category: "Perceivable|Operable|Understandable|Robust",
  file: "...",
  line: N,
  description: "...",
  code_snippet: "...",
  remediation: "..."
}