Accessibility Linter for VS Code

A powerful VS Code extension that provides real-time accessibility linting for HTML, JSX, and TSX files. Similar to SonarLint but focused exclusively on accessibility issues.

Features

• 🔍 Real-time Detection: Instant accessibility issue detection as you type
• 🎯 Editor Integration: Red squiggles under problematic code with detailed error messages
• 📋 Custom Issues Panel: Dedicated "Accessibility Issues" view in the Explorer sidebar
• 🚀 Click-to-Navigate: Jump directly to issue locations from the issues panel
• 📝 Multiple File Formats: Supports HTML, JSX (React), and TSX (TypeScript React)
• 🔧 Custom Rules Engine: Modular rule system without external dependencies

Accessibility Rules

The extension currently includes 32 accessibility rules covering images, image maps, forms, buttons, tables, lists, text formatting, links, navigation, labeling, internationalization, keyboard accessibility, and semantic attributes. For detailed documentation of each rule including examples and best practices, see RULES.md.

Installation

From VSIX File

1. Download the latest .vsix file from the Releases page
2. Open VS Code
3. Go to Extensions view (Cmd+Shift+X or Ctrl+Shift+X)
4. Click the ... menu at the top of the Extensions view
5. Select "Install from VSIX..."
6. Choose the downloaded .vsix file

From Command Line

code --install-extension a11y-linter-x.x.x.vsix

From Source

git clone https://github.com/AFixt/vscode.git
cd vscode
npm install
npm run compile

Then press F5 to launch the Extension Development Host.

Usage

Viewing Issues

Once installed, the extension automatically analyzes supported files:

1. Editor Squiggles: Accessibility issues appear as red underlines in your code
2. Problems Panel: View → Problems (Cmd+Shift+M or Ctrl+Shift+M)
3. Accessibility Issues Panel: Located in the Explorer sidebar
   • Shows all files with issues
   • Expandable tree showing issues per file
   • Click any issue to jump to its location

Supported Languages

The extension activates for these language modes:

• html
• javascriptreact (JSX)
• typescriptreact (TSX)

Example

Open demo/violations.html to see examples of all rule violations and correct implementations.

Configuration

Currently, all rules are enabled by default. Future versions will support configuration options.

Development

See CONTRIBUTING.md for detailed development instructions and how to write custom rules.

Quick Start

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Watch mode for development
npm run watch

# Run tests
npm test

# Run linter
npm run lint

# Package extension
npm install -g @vscode/vsce
vsce package

Building & Packaging

The project includes automated CI/CD via GitHub Actions:

• Pull Requests: Automatically runs tests, lints, builds and uploads .vsix as artifacts
• Main Branch: Runs tests, lints, builds on every push, artifacts available for 90 days
• Tagged Releases: Creates GitHub releases with .vsix attachments after passing all tests

Manual Build

npm run compile
vsce package

This creates a11y-linter-x.x.x.vsix in the project root.

Project Structure

vscode/
├── src/
│   ├── extension.ts          # Main extension logic
│   ├── rules/                 # Accessibility rules
│   │   ├── types.ts           # Rule interfaces
│   │   ├── index.ts           # Rule registry
│   │   └── *.ts               # Individual rule files
│   └── test/                  # Test suite
│       ├── runTest.ts         # Test runner
│       └── suite/             # Test files
│           ├── index.ts       # Test suite loader
│           ├── testHelper.ts  # Test utilities
│           └── *.test.ts      # Test cases
├── demo/                      # Example files
├── .github/workflows/         # CI/CD workflows
└── package.json               # Extension manifest

Contributing

Contributions are welcome! Please read CONTRIBUTING.md for:

• Git Flow workflow
• How to write new rules
• Code standards
• Testing guidelines

License

MIT License - see LICENSE file for details

Support

• 🐛 Report Issues
• 💡 Request Features
• 📖 Documentation

Roadmap

• [ ] Configuration file support
• [ ] Rule enable/disable settings
• [ ] Severity level customization
• [ ] Quick fix suggestions
• [ ] Additional accessibility rules
• [ ] Support for Vue and Angular templates
• [ ] Custom rule loading from workspace

Acknowledgments

Built with guidance from Claude Code and the accessibility community.