A11yGuard - Accessibility Linter for VS Code

A11yGuard detects and fixes web accessibility issues (WCAG/ADA) in real-time, directly in your VS Code editor.

Features

Real-Time Detection

Analyzes HTML, JSX, TSX, Vue, and Svelte files as you type
Highlights errors with different severity levels (critical, serious, moderate, minor)
Displays issues in the Problems panel and a dedicated sidebar

Automatic Quick Fixes

One-click fixes for common accessibility issues
Context-aware suggestions based on your code
Multiple fix options per issue

Comprehensive WCAG Coverage

Supports WCAG 2.0, 2.1, and 2.2 (Levels A, AA, AAA)
Categorized by principle (Perceivable, Operable, Understandable, Robust)
Links to official WCAG documentation

Color Contrast Analysis

Real contrast ratio calculation using WCAG 2.1 algorithm
Automatic color suggestions that meet contrast requirements
Support for all CSS color formats (hex, rgb, rgba, hsl, hsla, named colors)

Installation

From VS Code Marketplace

Open VS Code
Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
Search for "A11yGuard"
Click Install

From Command Line

code --install-extension a11yguard.a11yguard

Usage

Automatic Analysis

A11yGuard analyzes your code automatically as you type. Issues appear:

As underlines in your code (color-coded by severity)
In the "Problems" panel (Ctrl+Shift+M / Cmd+Shift+M)
In the "A11yGuard Issues" panel in the Explorer sidebar

Commands

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

Command	Description
`A11yGuard: Analyze Current File`	Force analysis of the current file
`A11yGuard: Analyze Workspace`	Analyze all supported files in workspace
`A11yGuard: Show Issues Panel`	Open the issues panel
`A11yGuard: Clear Diagnostics`	Clear all diagnostics

Quick Fixes

Place your cursor on an underlined error
Press Ctrl+. (or Cmd+. on Mac)
Select a suggested fix from the menu

Configuration

Open Settings (Ctrl+, / Cmd+,) and search for "A11yGuard":

{
  // Enable/disable A11yGuard
  "a11yguard.enable": true,

  // WCAG level to check (A, AA, AAA)
  "a11yguard.wcagLevel": "AA",

  // Minimum severity (critical, serious, moderate, minor)
  "a11yguard.minSeverity": "minor",

  // Analyze on save
  "a11yguard.analyzeOnSave": true,

  // Analyze in real-time
  "a11yguard.analyzeOnType": true,

  // Debounce time in ms
  "a11yguard.debounceTime": 500,

  // Rules to exclude
  "a11yguard.excludeRules": [],

  // Rules to include (empty = all)
  "a11yguard.includeRules": []
}

Supported Rules

Perceivable (WCAG 1.x)

Rule	Description	WCAG
`image-alt`	Images must have alternative text	1.1.1
`color-contrast`	Text must have sufficient color contrast	1.4.3
`label`	Form fields must have labels	1.3.1, 4.1.2
`meta-viewport`	Zoom must not be disabled	1.4.4

Operable (WCAG 2.x)

Rule	Description	WCAG
`tabindex`	Tabindex must not be positive	2.4.3
`heading-order`	Headings must be in logical order	1.3.1
`document-title`	Document must have a title	2.4.2

Understandable (WCAG 3.x)

Rule	Description	WCAG
`html-has-lang`	HTML element must have lang attribute	3.1.1

Robust (WCAG 4.x)

Rule	Description	WCAG
`button-name`	Buttons must have accessible names	4.1.2
`link-name`	Links must have accessible names	4.1.2, 2.4.4

Severity Levels

Level	Icon	Description
Critical	Error (red)	Blocks access to content completely
Serious	Warning (orange)	Significantly hinders usability
Moderate	Warning (yellow)	Causes inconvenience
Minor	Info (blue)	Recommended improvement

Troubleshooting

Extension not working?

Check that the file type is supported (HTML, JSX, TSX, Vue, Svelte)
Verify the extension is enabled in Settings
Try reloading the window (Ctrl+Shift+P → "Developer: Reload Window")

Too many false positives?

Adjust a11yguard.minSeverity to filter out minor issues
Use a11yguard.excludeRules to disable specific rules
Set a11yguard.wcagLevel to match your requirements

Performance issues?

Increase a11yguard.debounceTime to reduce analysis frequency
Disable a11yguard.analyzeOnType and use manual analysis

Contributing

Contributions are welcome! Please see our Contributing Guide.

A11yGuard Web Scanner - Online accessibility scanner
A11yGuard Widget - Embeddable accessibility widget

License

MIT - See LICENSE for details.

A11yGuard - Protect your code's accessibility in real-time

A11yGuard - Accessibility Linter

A11YGuard Team