A11y Studio - Visual Studio Marketplace

Accessibility linting for React devs. WCAG 2.2 checks, Quick Fixes, and shared team presets — right in your editor.

Most accessibility tools give you a rule ID. A11y Studio gives you the why — the success criterion, a plain-language explanation of who is affected, and a direct link to the W3C standard, all without leaving the Problems panel.

Features

WCAG 2.2 diagnostics in plain language Each jsx-a11y finding shows the WCAG success criterion, a plain-language explanation of the impact on users with disabilities, and a direct W3C Understanding link — not just a rule ID. Runs on save, not on every keystroke.

Quick Fixes for common cases Hand-maintained fixes for 15+ rules via the lightbulb menu (Ctrl+. / Cmd+.). Covers alt text, html lang, iframe titles, label/control wiring, tabindex, ARIA roles and props, autocomplete tokens, interactive-supports-focus, and more. Each fix is safe, deterministic, and reviewed.

Apply all quick fixes in file Command Palette: A11y Studio: Apply all quick fixes in file — applies every deterministic fix in the active .jsx / .tsx file in one step. Skips lines with multiple findings to stay safe.

Open WCAG doc Cmd+Alt+W / Ctrl+Alt+W opens the W3C Understanding page for the diagnostic at the cursor. Assign or change the shortcut in Keyboard Shortcuts.

Initialize preset Command Palette: A11y Studio: Initialize ESLint + jsx-a11y preset in this folder — sets up ESLint 9 + jsx-a11y with WCAG-aligned rules in one step when those files are missing. Trusted workspace only.

AI guidance (roadmap) Context-aware WCAG explanations, SME-style guidance, and automated test and acceptance-criteria generation — coming as an additive layer in v0.3+. Longer roadmap notes ship with the source repository when published.

No telemetry. No accounts. Everything runs locally. v1 has no outbound calls, no login, no tracking.

Screenshots

Image URLs below use raw.githubusercontent.com so screenshots render on the VS Marketplace web listing; the same files are still bundled under media/ in the VSIX.

Problems panel — WCAG context on every finding

Problems row showing Issue, WCAG success criterion, plain-language guidance, and a W3C Understanding link

Problems panel — suggestion-style rows

Problems list with suggestion-style accessibility rows

Diagnostic hover

Diagnostic hover with WCAG-style explanation

Quick Fix — choose from options

Quick Fix menu with choose-from-options style entries

Apply all quick fixes

Command palette showing apply all quick fixes in file

Getting started

Install A11y Studio from the Marketplace, or run ext install a11ystudio.a11y-studio in the Command Palette.
Open a trusted folder containing React .jsx or .tsx files.
Make sure ESLint and eslint-plugin-jsx-a11y are installed — or run Initialize preset to set them up in one step.
Open any JSX/TSX file and Save. Findings appear in the Problems panel immediately.
Use the lightbulb (Ctrl+. / Cmd+.) to apply a Quick Fix, or Cmd+Alt+W to open the W3C Understanding page for the finding at the cursor.

Diagnostics and hovers

Each finding is written so Problems and inline hovers carry Issue, WCAG, Guidance, and Docs in one place, on purpose, so you are not sent elsewhere for the basics.

VS Code and Cursor may also merge other diagnostics (for example TypeScript) into the same hover when ranges overlap. That is normal workbench behavior, not a duplicate message from A11y Studio.

If hovers appear too quickly or get in the way of the Problems panel, adjust your User Settings (JSON) (for example "editor.hover.delay": 800 and "editor.hover.sticky": false).

Requirements

VS Code 1.90+
Trusted workspace — ESLint runs only in trusted folders
ESLint + eslint-plugin-jsx-a11y — A11y Studio enriches what ESLint reports; it does not replace the engine
Initialize preset configures ESLint 9 flat-style config — legacy .eslintrc is not covered in v1

Configuration

Add an optional a11y-studio.json file at your project root to tune rule behaviour and team presets. Rule severities and ESLint disable comments still live in your ESLint config as normal.

Scope

Topic	Detail
Files	`.jsx` / `.tsx` only (`javascriptreact` / `typescriptreact`)
Engine	eslint-plugin-jsx-a11y + bundled wcag-map.json (included in this extension)
Out of scope today	Angular, Vue, plain HTML, React Native, plain `.js` / `.ts` without JSX language mode

A11y Studio enriches what ESLint reports for those files. It does not replace a full audit or provide axe-level runtime coverage.

Privacy

No telemetry in this extension
No accounts, servers, or OAuth in v1
Optional Figma entries in a11y-studio.json are URLs you paste locally — no outbound calls are made

Compliance and independence

WCAG 2.2 wording and Understanding links describe engineering mapping — not certification, legal sign-off, or a substitute for professional audits
ADA / Section 508: this extension is a developer workflow tool, not legal or compliance tooling
Independent open-source software — not affiliated with Microsoft, Google, Apple, GitHub, or W3C
Contributors are listed in the AUTHORS file bundled with this extension.

License

MIT — full license text is in the bundled MIT license file for this extension (see also the Marketplace License tab).

Security and release notes

Security: Report vulnerabilities using the instructions in the security policy shipped inside this extension’s package. The Marketplace Details readme cannot link to bundled files; open the extension folder from Extensions if you need the file on disk.
Release notes: Use the Changelog tab on this Marketplace page (this extension does not rely on clickable links to the bundled changelog file in the readme).