AccessiScan AI - VS Code Extension

🚀 AI-Powered Accessibility Compliance Checker

Make your web accessible with AI. Scan your code for WCAG violations and get intelligent fixes in seconds.

✨ Key Features

• 🔍 AI-Powered Scanning - Detects accessibility issues in HTML, React, TSX, Vue, and Svelte
• 🎯 WCAG Compliance - Checks against WCAG 2.1 standards automatically
• ⚡ Smart AI Fixes - Get AI-generated suggestions to fix issues instantly
• 📊 Detailed Reports - See what's broken and why it matters
• 🎨 Inline Diagnostics - Issues appear directly in your code with quick fixes
• ✅ Works Out of Box - Comes with default API key, no setup required

🚀 Quick Start

1. Install from VS Code Marketplace
2. Open any HTML/React/Vue file
3. Run Commands:
   • Press Ctrl+Shift+P → Type "AccessiScan: Scan" → Enter
   • Or Press Ctrl+Shift+P → Type "AccessiScan: Fix" → Enter

That's it! Extension works immediately with default API.

🎯 Commands

• AccessiScan: Scan Current File - Detect WCAG issues
• AccessiScan: Fix All File Issues - Auto-fix all problems
• Also available via right-click context menu

🔑 Optional: Use Your Own API Key

Want to use your own Groq API key?

1. Get a free key: https://console.groq.com
2. Open VS Code Settings (Ctrl+,)
3. Search: accessiscan.apiKey
4. Paste your key

🌐 Supported File Types

• ✅ HTML files (.html)
• ✅ React JSX (.jsx, .tsx)
• ✅ Vue files (.vue)
• ✅ Svelte files (.svelte)

📋 What Gets Checked

• Missing alt text on images
• Poor color contrast
• Missing ARIA labels
• Improper heading hierarchy
• Form accessibility issues
• Keyboard navigation problems
• And more WCAG violations...

⚙️ System Requirements

• VS Code 1.80.0 or later
• Internet connection (for Groq AI API)

📖 Development

For developers wanting to contribute:

# Clone the repository
git clone https://github.com/Zahid-Ham/accessiscan-vscode.git

# Install dependencies
cd accessiscan-vscode
npm install

# Run in development mode
npm run watch

# Press F5 to test in VS Code


```bash
npm run vscode:prepublish

Usage Guide

Scanning a File for Issues

1. Open any HTML, React, TSX, Vue, or Svelte file in VS Code
2. Look at the editor title bar - you'll see icons added by AccessiScan
3. Click the Search icon (🔍) to run: "AccessiScan: Scan Current File"
4. Wait for the scan to complete (progress notification will appear)
5. Issues will appear as:
   • Inline diagnostics (squiggly lines in the editor)
   • Problems panel (View → Problems or Ctrl+Shift+M)
   • Hover messages showing issue details

Getting AI-Powered Fixes

1. After scanning, click the Wand icon (✨) to run: "AccessiScan: Fix All File Issues"
2. The AI will generate fixes for detected accessibility problems
3. Review and apply the suggested changes

Running Commands

You can also run commands via the Command Palette:

1. Press Ctrl+Shift+P (or Cmd+Shift+P on Mac)
2. Type:
   • AccessiScan: Scan Current File - Run accessibility audit
   • AccessiScan: Fix All File Issues - Get AI-generated fixes

Project Structure

accessiscan-vscode/
├── src/
│   ├── extension.ts         # Main extension entry point & command handlers
│   ├── scanner.ts           # Core scanning logic using axe-core
│   └── groqProvider.ts      # Groq AI integration for fixes
├── out/                     # Compiled JavaScript (generated)
├── package.json             # Project dependencies & scripts
├── tsconfig.json            # TypeScript configuration
└── README.md               # This file

File Descriptions

src/extension.ts

• Main entry point for the VS Code extension
• Registers commands (scanFile, fixAll)
• Handles UI interactions and diagnostics
• Manages progress notifications

src/scanner.ts

• Uses axe-core to detect accessibility issues
• Parses HTML/JSX code
• Maps issues to WCAG rules
• Calculates disability impact

src/groqProvider.ts

• Integrates with Groq AI API
• Generates AI-powered fixes
• Loads and manages WCAG guidelines
• Provides accessibility recommendations

Configuration

Settings (Workspace Settings)

Edit .vscode/settings.json to customize:

{
  "accessiscan.apiKey": "your-groq-api-key-here"
}

Supported File Types

• *.html - HTML files
• *.jsx - React files
• *.tsx - TypeScript React files
• *.ts - TypeScript files
• *.vue - Vue files
• *.svelte - Svelte files

Available Commands

Troubleshooting

Issue: "No active editor found to scan"

Solution: Make sure you have a file open in the editor before running the scan command.

Issue: "AI API Key is not configured"

Solution:

1. Go to VS Code Settings (Ctrl+,)
2. Search for accessiscan.apiKey
3. Enter your Groq API key

Issue: Extension doesn't appear in VS Code

Solution:

1. Make sure compilation succeeded: npm run compile
2. Check for errors in the Debug Console (F1 → Debug Console)
3. Reload VS Code window (Ctrl+R)

Issue: TypeScript compilation errors

Solution:

# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm install
npm run compile

Issue: Scan takes a long time or times out

Solution:

• This may be due to network latency with Groq API
• Try scanning smaller files first
• Check your internet connection

Development Workflow for Your Team

For First-Time Setup:

# 1. Clone repository
git clone <repository-url>
cd accessiscan-vscode

# 2. Install dependencies
npm install

# 3. Configure API key in VS Code settings
# (Settings → Search "accessiscan.apiKey")

# 4. Compile TypeScript
npm run compile

# 5. Launch extension
# Press F5 to run in debug mode

For Making Changes:

# In terminal:
npm run watch

# Then in VS Code:
# Press F5 to launch Extension Development Host
# The extension auto-reloads on code changes

For Testing:

1. Open test files in the Extension Development Host
2. Use the scan icon to test accessibility scanning
3. Check Problems panel for detected issues
4. Use the fix icon to test AI-powered remediation

Dependencies

• @types/vscode: VS Code extension API types
• @types/node: Node.js type definitions
• typescript: TypeScript compiler
• groq-sdk: Groq API client for AI services
• axe-core: Accessibility auditing engine
• jsdom: DOM implementation for Node.js

License

[Add your license here]

Support

For issues or questions:

1. Check the Troubleshooting section above
2. Review inline code comments
3. Check extension output in VS Code Debug Console (Ctrl+Shift+U)

Next Steps

• Configure your team's Groq API key
• Set up a shared settings file for consistency
• Document any custom rules or mappings
• Test with sample accessibility issues
• Integrate into your team's development workflow

Happy scanning! 🚀