a11ylisted

# A11y — Accessibility Testing & Auditing ## Activate When - User invokes `/godmode:a11y` - User says "check accessibility," "is this accessible?", "WCAG compliance" - Pre-ship quality gate during `/godmode:ship` workflow - After UI changes, component library updates, or design system modifications - When building forms, navigation, modals, or interactive widgets - Code review flags missing ARIA attributes or semantic HTML issues ## Workflow ### Step 1: Define Audit Scope Determine which pages, components, or flows to audit: ``` A11Y AUDIT SCOPE: Target: <page/component/entire app> WCAG level: <AA (default) | AAA> ``` ### Step 2: Automated Tool Scanning Run automated accessibility scanners in sequence: #### Axe-core Analysis ```bash # Install if needed npm install --save-dev @axe-core/cli ``` #### Pa11y Scanning ```bash # Install if needed npm install --save-dev pa11y pa11y-ci ``` #### Lighthouse Accessibility Audit ```bash # Run Lighthouse accessibility category npx lighthouse <url> --only-categories=accessibility --output=json --output-path=./a11y-report.json ``` ``` AUTOMATED SCAN RESULTS: Axe findings: <N> violations, <N> incomplete, <N> passes Pa11y findings: <N> errors, <N> warnings, <N> notices ``` ### Step 3: WCAG 2.1 Compliance Checklist Systematic check against WCAG 2.1 principles: #### Perceivable (WCAG 1.x) ``` CHECK — Can all users perceive the content? 1.1 Text Alternatives: ``` #### Operable (WCAG 2.x) ``` CHECK — Can all users operate the interfa