WCAGenie

WCAGenie is a real-time accessibility linter for the editor. It scans React, JSX, TSX, and HTML against 26 WCAG 2.1 Level A & AA rules as you type, offers one-click fixes (deterministic and AI-powered), and includes a screen reader preview so you can hear your UI the way assistive-technology users do.

Why WCAGenie

Most a11y tools catch issues at runtime, in the browser, after deployment. WCAGenie shifts that left into the editor:

• Real time. Diagnostics appear as you type, with a debounced scan.
• Explain the why. Every issue links to its WCAG criterion and the corresponding axe-core docs.
• Fix with confidence. Static and AI fixes both show a confidence score and risk level before you apply them.
• Hear your UI. The screen reader simulator announces elements out loud using the Web Speech API — voice, rate, and per-row playback.
• Zero config. Works out of the box. AI features are opt-in.
• CI-ready. Export a JSON report for custom CI integrations and dashboards.

Quick start

Install from the Marketplace:

code --install-extension garvitmagoo.wcagenie

Or search WCAGenie in the Extensions panel.

That's it. Open any .tsx / .jsx / .html file and WCAGenie will start scanning. Issues show up as squiggles. Hover for the message; press ⌘. (Ctrl+. on Windows/Linux) to apply a fix.

Keyboard shortcuts

Commands

All commands are prefixed with WCAGenie: in the Command Palette (⌘⇧P):

• Show Accessibility Report
• Screen Reader Preview
• Static Fix Current File · Static Fix Workspace
• AI Fix Entire File · Bulk AI Fix Workspace
• Generate A11y Unit Tests
• Export Report (JSON)
• Set AI API Key
• Open Settings

Rules (26)

WCAGenie ships with 26 rules covering WCAG 2.1 Level A and AA.

You can disable any rule, override severity, or scope rules by glob in .a11yrc.json.

AI fixes (optional)

WCAGenie supports GitHub Copilot, OpenAI, Azure OpenAI, and Anthropic Claude for context-aware fixes. AI is off by default.

GitHub Copilot (no API key)

The easiest option if you already have GitHub Copilot. It uses the VS Code Language Model API and your existing Copilot subscription — no API key needed.

1. Run WCAGenie: Open Settings and select GitHub Copilot as the provider.
2. Use WCAGenie: AI Fix Entire File for a single file or Bulk AI Fix Workspace for everything.

// settings.json
{
  "a11y.aiProvider": "copilot",
  // optional — pick a model family, otherwise the first available Copilot model is used
  "a11y.aiModel": "gpt-4o"
}

Requires VS Code 1.93+ with GitHub Copilot installed and signed in. The first request will prompt you to grant WCAGenie access to language models.

Bring your own key (OpenAI / Azure / Claude)

1. Run WCAGenie: Set AI API Key and paste your key (stored in VS Code secret storage).
2. Run WCAGenie: Open Settings and pick a provider.
3. Use WCAGenie: AI Fix Entire File for a single file or Bulk AI Fix Workspace for everything.

Each AI fix shows confidence, reasoning, and a diff preview before anything is written. Caching is in-memory with a 10-minute TTL to keep API usage low.

// settings.json
{
  "a11y.aiProvider": "claude",
  "a11y.aiModel": "claude-sonnet-4-6"
}

For Azure OpenAI:

{
  "a11y.aiProvider": "azure-openai",
  "a11y.aiEndpoint": "https://your-resource.openai.azure.com",
  "a11y.aiModel": "your-deployment-name"
}

Project config (.a11yrc.json)

Drop a .a11yrc.json at your project root to customize rules and exclusions:

{
  "rules": {
    "color-contrast": { "severity": "error" },
    "heading-order": false
  },
  "exclude": ["**/test/**", "**/storybook/**"],
  "aiExclude": ["**/legacy/**"]
}

Disabled rules and excluded files are respected by diagnostics, the report panel, JSON exports, and bulk fixes.

CI / CD

Export a JSON accessibility report for custom CI integrations, dashboards, or quality gates:

code --command a11y.exportReport

This writes a11y-report.json to the workspace root, which you can upload as a build artifact or parse in a custom step:

# .github/workflows/a11y.yml
- uses: actions/upload-artifact@v4
  with:
    name: a11y-report
    path: a11y-report.json

Settings reference

Development

git clone https://github.com/garvitmagoo/wcagenie.git
cd wcagenie
npm install
npm run compile

Press F5 to launch the Extension Development Host.

npm test                  # unit tests
npm run test:integration  # integration tests in a real VS Code instance
npx @vscode/vsce package  # build a .vsix

Architecture

src/
├── extension.ts          Extension entry point, command registration
├── diagnostics.ts        Real-time diagnostic pipeline
├── codeActions.ts        Quick fixes, static fix, AI fix commands
├── config.ts             .a11yrc.json loader with caching
├── statusBar.ts          Accessibility score status bar item
├── parallelScanner.ts    Worker pool for workspace-wide scans
├── ai/
│   ├── caller.ts         Shared AI caller with retry/backoff
│   ├── provider.ts       Single-issue AI fix + cache
│   └── fullFileFix.ts    Full-file AI fix + cache
├── scanner/
│   ├── astScanner.ts     AST walker, rule orchestration
│   ├── axeIntegration.ts axe-core metadata + fix validation
│   ├── screenReaderSimulator.ts  SR announcement engine
│   └── rules/            26 individual rule checkers
└── webview/
    ├── reportPanel.ts            Accessibility report
    ├── screenReaderPanel.ts      Screen reader simulator UI
    ├── configPanel.ts            Visual settings
    ├── diffPreviewPanel.ts       AI fix diff preview
    ├── bulkFixPreviewPanel.ts    Bulk fix preview
    └── utils.ts                  Shared webview helpers (CSP, command bar)

Contributing

Bug reports and PRs welcome at github.com/garvitmagoo/wcagenie.

When proposing a new rule, include the WCAG criterion it maps to, a sample positive case, a sample negative case, and ideally a static fix.

License

MIT © Garvit Magoo