WCAG Auditor — Accessibility Linter for VSCode
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="you@example.com">
<!-- ❌ 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
