Web Accessibility Checker - VS Code Extension

A powerful VS Code extension for checking web accessibility issues in your code. Supports TypeScript, JavaScript, JSX, TSX, HTML, and Vue files.

Features

• 🔍 Real-time Checking: Automatically check accessibility issues on file save and open
• 📁 Multi-file Support: Supports TypeScript, JavaScript, JSX, TSX, HTML, and Vue files
• ⚙️ Configurable: Rich configuration options including file patterns and severity levels
• 🎯 Smart Diagnostics: Display detailed accessibility issues in the Problems panel
• 🚀 Batch Checking: Support for checking entire workspace
• 📋 Command Palette: Convenient commands to manually trigger checks

Installation

Quick Install (Recommended)

Linux/macOS:

./install.sh

Windows:

install.bat

Manual Installation

1. Download VSIX file

   • Find the web-accessibility-checker-0.0.1.vsix file in the project root

2. Install to VS Code

   # Install using command line
   code --install-extension web-accessibility-checker-0.0.1.vsix
   
   # Or install through VS Code interface
   # 1. Open VS Code
   # 2. Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac)
   # 3. Type "Extensions: Install from VSIX..."
   # 4. Select the web-accessibility-checker-0.0.1.vsix file
   

Build from Source

1. Clone this repository
2. Run npm install to install dependencies
3. Run npm run package to build the extension
4. Run the install script or manually install the generated .vsix file

Usage

Automatic Checking

The extension will automatically check accessibility issues in the following cases:

• When files are saved
• When files are opened
• When file content is modified

Manual Checking

Use the command palette (Ctrl+Shift+P or Cmd+Shift+P) to run the following commands:

• Web Accessibility: Check Accessibility (Current File) - Check current file
• Web Accessibility: Check Accessibility (Workspace) - Check entire workspace
• Web Accessibility: Clear Accessibility Diagnostics - Clear diagnostic information

Right-click Menu

Right-click on supported files and select "Check Accessibility" to check the current file.

Configuration Options

Search for "Web Accessibility Checker" in VS Code settings to configure the following options:

• webAccessibilityChecker.enableAutoCheck: Enable automatic checking (default: true)
• webAccessibilityChecker.severity: Default severity level (error/warning/info, default: warning)
• webAccessibilityChecker.includePatterns: File patterns to include (default: ["**/*.{tsx,jsx,ts,js,html,vue}"])
• webAccessibilityChecker.excludePatterns: File patterns to exclude (default: ["**/node_modules/**", "**/dist/**", "**/build/**"])

Supported Accessibility Rules

The extension provides the following accessibility checks based on eslint-plugin-jsx-a11y:

• Image Accessibility: Ensure images have alt text
• Link Accessibility: Validate link content and href attributes
• ARIA Properties: Check proper use of ARIA attributes
• Keyboard Navigation: Ensure interactive elements support keyboard operations
• Semantic Tags: Validate proper HTML semantics
• Focus Management: Check focus-related accessibility issues
• Color Contrast: Alert about potential color contrast issues

Examples

React/TSX Component

// ❌ Code with accessibility issues
function MyComponent() {
  return (
    <div onClick={handleClick}>
      <img src="https://github.com/your-username/web-accessibility-checker-vscode-extension/raw/HEAD/image.jpg" />
      <a href="#"></a>
    </div>
  );
}

// ✅ Fixed code
function MyComponent() {
  return (
    <div onClick={handleClick} onKeyDown={handleKeyDown} role="button" tabIndex={0}>
      <img src="https://github.com/your-username/web-accessibility-checker-vscode-extension/raw/HEAD/image.jpg" alt="Description of the image content" />
      <a href="#main">Skip to main content</a>
    </div>
  );
}

Development

Building the Extension

# Install dependencies
npm install

# Compile the extension
npm run compile

# Package the extension
npm run package

# Watch for file changes
npm run watch

Testing

# Run tests
npm test

# Check code quality
npm run lint

# Format code
npm run format

Troubleshooting

Extension Not Activated

1. Ensure file types are supported (.tsx, .jsx, .ts, .js, .html, .vue)
2. Check if the extension is properly installed
3. Restart VS Code

Check Results Not Showing

1. Ensure files are in the include patterns
2. Check if files are in the exclude patterns
3. View the Problems panel (View > Problems)

Performance Issues

1. Adjust include/exclude patterns to reduce the number of files checked
2. Disable automatic checking and use manual triggering instead
3. Exclude large dependency directories

Contributing

Issues and Pull Requests are welcome!

1. Fork this repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Create a Pull Request

License

MIT License - see the LICENSE file for details.

Changelog

v0.0.1

• Initial version
• Support for basic accessibility checking
• Support for multiple file formats
• Configuration options
• Real-time checking functionality