A powerful, ESLint-style accessibility auditing extension that catches WCAG violations directly in your editor as you code.

Features

🔍 Rules Covered

Rule	WCAG Criterion	Severity
Missing `alt` on `<img>`	1.1.1 Non-text Content (A)	Error
Empty `alt` inside links	2.4.4 Link Purpose (A)	Warning
Inputs missing labels	1.3.1 Info & Relationships (A)	Error
Invalid ARIA roles	4.1.2 Name, Role, Value (A)	Error
Redundant ARIA roles	4.1.2 Name, Role, Value (A)	Warning
`aria-hidden` on focusable elements	4.1.2 Name, Role, Value (A)	Error
Heading level skips (h1→h3)	2.4.6 Headings & Labels (AA)	Warning
Multiple `<h1>` elements	2.4.6 Headings & Labels (AA)	Warning
Missing heading structure	2.4.6 Headings & Labels (AA)	Warning
Clickable non-interactive elements	2.1.1 Keyboard (A)	Error
Missing `lang` on `<html>`	3.1.1 Language of Page (A)	Warning
Empty headings	2.4.6 Headings & Labels (AA)	Warning
Positive `tabindex`	2.4.3 Focus Order (A)	Warning
Button missing `type`	3.2.2 On Input (A)	Info
Media with `autoplay`	1.4.2 Audio Control (A)	Error
Non-descriptive link text	2.4.4 Link Purpose (A)	Warning
Duplicate `id` attributes	4.1.1 Parsing (A)	Error
Fieldset missing `<legend>`	1.3.1 Info & Relationships (A)	Warning

🗂️ Supported File Types

HTML (.html, .htm)
React (.jsx, .tsx)
Vue (.vue)
Svelte (.svelte)
JavaScript/TypeScript with JSX (.js, .ts)

Installation

Option A: Install from VSIX (Recommended)

Open VSCode
Press Ctrl+Shift+P (or Cmd+Shift+P on Mac) → "Extensions: Install from VSIX..."
Select the wcag-auditor-1.0.0.vsix file
Reload VSCode when prompted

Option B: Manual (Development)

cd wcag-auditor
npm install
npm run compile

Then press F5 in VSCode to launch the Extension Development Host.

Usage

Automatic Audit

Issues appear automatically when you:

Open a supported file
Save a file (default behaviour)

Manual Commands

Open the Command Palette (Ctrl+Shift+P) and run:

Command	Description
`WCAG Auditor: Run Accessibility Audit`	Audit the current file
`WCAG Auditor: Show Accessibility Panel`	Open the results panel
`WCAG Auditor: Clear All Diagnostics`	Remove all issues
`WCAG Auditor: Toggle Auto-Audit on Save`	Enable/disable auto-audit

Status Bar

The status bar shows a live count of errors and warnings:

✓ WCAG ✓ — All clear
⚠ WCAG 3W — 3 warnings
✗ WCAG 2E 1W — 2 errors, 1 warning

Click it to open the Accessibility Panel.

Configuration

Add to your settings.json:

{
  "wcagAuditor.enabled": true,
  "wcagAuditor.auditOnSave": true,
  "wcagAuditor.auditOnType": false,

  "wcagAuditor.rules": {
    "missingAlt": true,
    "emptyAlt": true,
    "missingLabel": true,
    "ariaRole": true,
    "headingStructure": true,
    "keyboardAccess": true,
    "missingLang": true,
    "emptyHeading": true,
    "tabIndex": true,
    "missingButtonType": true
  },

  "wcagAuditor.severity": {
    "missingAlt": "error",
    "emptyAlt": "warning",
    "missingLabel": "error",
    "ariaRole": "warning",
    "headingStructure": "warning",
    "keyboardAccess": "error",
    "missingLang": "warning",
    "emptyHeading": "warning",
    "tabIndex": "warning",
    "missingButtonType": "information"
  }
}

Examples of Detected Issues

<!-- ❌ Missing alt -->
<img src="https://github.com/DavidBuesa/wcag-auditor/raw/HEAD/photo.jpg">

<!-- ✅ Fixed -->
<img src="https://github.com/DavidBuesa/wcag-auditor/raw/HEAD/photo.jpg" alt="Team meeting in the conference room">

<!-- ❌ Input with no label -->
<input type="email" placeholder="Email">

<!-- ✅ Fixed -->
<label for="email">Email address</label>
<input type="email" id="email" placeholder="[email protected]">

<!-- ❌ Invalid ARIA role -->
<div role="tabbable">...</div>

<!-- ❌ Heading skip -->
<h1>Title</h1>
<h4>Subtitle</h4>  <!-- Skips h2 and h3! -->

<!-- ❌ Not keyboard accessible -->
<div onclick="doSomething()">Click me</div>

<!-- ✅ Fixed -->
<button type="button" onclick="doSomething()">Click me</button>

WCAG References

License

MIT

WCAG Auditor — Accessibility Linter