WCAG Lens

Real-time WCAG accessibility diagnostics for VS Code and Cursor.

WCAG Lens watches your HTML and JSX files as you type and flags accessibility violations with red underlines — like a spell checker for WCAG compliance.

What it catches

• Missing alt text on images (WCAG 1.1.1)
• Inputs without labels (WCAG 1.3.1)
• Non-descriptive link text like "click here" (WCAG 2.4.6)
• Missing lang attribute on html element (WCAG 3.1.1)
• Autoplay on video or audio (WCAG 1.4.2)
• Divs used as buttons without keyboard support (WCAG 4.1.2)
• Positive tabindex values that break tab order (WCAG 2.4.3)
• aria-hidden on focusable elements (WCAG 4.1.2)
• Empty buttons and links (WCAG 4.1.2, 2.4.4)
• ARIA misuse — invalid roles, missing states, empty attributes
• And 15 more rules covering WCAG 2.1 and 2.2 AA

How it works

Open any HTML, JSX, or TSX file. Violations appear immediately as yellow underlines. Hover to see the WCAG rule number, a plain English explanation, and a specific fix suggestion.

Open the Problems panel (Cmd+Shift+M) to see all violations in the file at once.

Supported file types

• HTML (.html, .htm)
• JSX (.jsx)
• TSX (.tsx)

Part of the wcaginpractice.com ecosystem

WCAG Lens is one part of a free accessibility toolkit built by Jainish Soni (CPACC Certified):

• WCAG Lens (this extension) — real-time diagnostics as you type
• wcag-kit — MCP server that gives AI assistants (Claude, Cursor) deep WCAG knowledge: https://npmjs.com/package/wcag-kit
• wcaginpractice.com — interactive playground with 27 broken vs fixed accessibility patterns: https://wcaginpractice.com

All three products share the same rule definitions and teach the same patterns — learn on the site, enforce with the extension, ask your AI assistant using wcag-kit.

Suggest a rule

Missing a pattern you see in real products? https://wcaginpractice.com/contribute

CPACC Certification

https://www.credly.com/badges/40cf41b8-ad65-4591-8f0b-c13e1ad108f1/public_url