Accessify — VS Code Extension

Accessify brings accessibility testing directly into your VS Code editor. It scans React, JSX, TSX, and HTML files in real time against 24 WCAG 2.1 Level A & AA rules and offers one-click fixes (both deterministic and AI-powered) with confidence scoring and axe-core validation. A built-in screen reader simulator with voice playback lets you hear your UI the way assistive technology users experience it.

Why Accessify?

Most accessibility tools only catch issues at runtime in the browser. Accessify shifts accessibility left into your editor:

• Catch issues before code review — real-time scanning as you type, not after deployment
• Understand the impact — every issue links to WCAG criteria, axe-core docs, and impact levels
• Fix with confidence — AI-generated fixes show confidence scores so you know what's safe to apply
• Hear what users hear — the screen reader preview lets you experience your UI the way assistive technology users do
• Zero config — works out of the box with 24 built-in rules; AI features are optional
• HTML support — works with plain HTML files in addition to JSX/TSX

Features

• Real-time scanning — Detects accessibility issues as you type with debounced diagnostics
• 24 built-in rules — Covers WCAG 2.1 Level A & AA success criteria (see Rules)
• Inline diagnostics — Issues appear as squiggly underlines in the editor
• Quick Fixes — Click the lightbulb to apply fixes instantly with confidence % shown in the action title
• Static Fix Current File — Preview and apply all deterministic fixes for the current file with a risk-aware preview panel
• AI-powered fixes — Optional OpenAI / Azure OpenAI / Claude integration for context-aware fix suggestions
• AI Fix Entire File — Let AI fix all issues in a file at once with a diff preview
• Bulk AI Fix Workspace — AI-generate fixes for all files in the workspace (scans each file first, skips clean files)
• AI Fix Caching — Both single-fix and full-file AI results are cached in-memory (10 min TTL) to avoid redundant API calls
• Confidence & Reasoning — Every fix (static and AI) shows a confidence score (0–100%), color-coded risk level, WCAG references, and caveats
• axe-core Integration — Fixes are cross-validated against axe-core rule metadata for impact levels, WCAG tags, and documentation links
• Screen Reader Preview — Simulates how a screen reader would announce elements, with voice simulation (Web Speech API), per-row playback, speed control, and voice selection
• Accessibility Score — Live score (0–100) in the status bar with severity breakdown; click to view report
• Visual Settings Panel — Configure rules, AI provider, exclude patterns, and performance settings via a dedicated UI
• Test Generation — Auto-generate accessibility test cases from detected issues
• CI/CD Export — Export SARIF (for GitHub Code Scanning) or JSON reports
• Configurable — Enable/disable rules, set severity overrides, and exclude files via .a11yrc.json or the Settings panel
• Config-aware reports — Disabled rules and excluded files are respected in reports and exports

Rules

Accessify ships with 24 rules covering WCAG 2.1 Level A and AA success criteria:

Getting Started

Install from Marketplace

Search for Accessify in the VS Code Extensions panel, or run:

code --install-extension garvit-magoo.accessify

Install from VSIX

code --install-extension accessify-1.1.0.vsix

Usage

1. Open any .tsx, .jsx, or .html file — issues appear inline automatically
2. Hover over a squiggly underline to see the issue detail and WCAG reference
3. Click the lightbulb (or press Ctrl+.) to see Quick Fix options with confidence scores
4. Click the score in the status bar to view the full accessibility report
5. Use keyboard shortcuts for fast access (see below)

Commands

Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and type Accessify:

Keyboard Shortcuts

Configuration

Visual Settings Panel

Run Accessify: Open Settings from the Command Palette to configure everything via a visual UI — AI provider, model, rule toggles, exclude patterns, and performance tuning.

VS Code Settings

Enable AI Fixes

1. Run Accessify: Set AI API Key from the Command Palette to store your key securely
2. Set the provider in settings (or use the Settings panel):

{
  "a11y.aiProvider": "openai"
}

For Azure OpenAI, also set the endpoint:

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

For Claude (Anthropic):

{
  "a11y.aiProvider": "claude"
}

Project-Level Config (.a11yrc.json)

Create a .a11yrc.json in your workspace root to customize rules and exclusions:

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

Disabled rules are excluded from diagnostics, reports, and CI/CD exports.

CI/CD Integration

Export a SARIF report and upload it to GitHub Code Scanning:

# .github/workflows/a11y.yml
- name: Upload SARIF
  uses: github/codeql-action/upload-sarif@v3
  with:
    sarif_file: a11y-report.sarif

Development

git clone https://github.com/garvit-magoo/accessify.git
cd accessify
npm install
npm run compile

Press F5 in VS Code to launch the Extension Development Host.

Run Tests

npm test

Package

npx @vscode/vsce package

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
├── types.ts              # Shared type definitions
├── ai/
│   ├── caller.ts         # Shared AI API caller with retry/backoff
│   ├── provider.ts       # Single-issue AI fix with caching
│   └── fullFileFix.ts    # Full-file AI fix with caching
├── scanner/
│   ├── astScanner.ts     # AST walker, rule orchestration
│   ├── axeIntegration.ts # axe-core metadata, fix validation
│   ├── jsxValidator.ts   # JSX syntax validation
│   └── rules/            # 24 individual rule checkers
└── webview/
    ├── reportPanel.ts    # Accessibility report panel
    ├── diffPreviewPanel.ts       # AI fix diff preview
    ├── bulkFixPreviewPanel.ts    # Bulk fix preview
    ├── screenReaderPanel.ts      # Screen reader simulator
    ├── configPanel.ts    # Visual settings panel
    └── utils.ts          # Shared webview utilities

License

MIT