The single source of agreement between design and development.
Real-time WCAG accessibility auditing and design system contract validation for HTML, JSX, TSX, CSS, Vue, and Svelte in VS Code.
- Real-time auditing — catch accessibility issues as you save
- Inline diagnostics — squiggly underlines with hover details and WCAG references
- Quick fixes — one-click fixes for common issues (missing alt, roles, labels, tabIndex, touch targets)
- Sidebar results — tree view of all issues grouped by file with severity counts
- Summary panel — aggregated error/warning/info counts across all audited files
- Status bar — at-a-glance issue count with project name when connected
- Workspace audit — scan all files in one go
- Contract validation — validate components against agreed design/code contracts
- Extracts props, state variables, event handlers, and CSS tokens from .tsx/.jsx files
- Fuzzy-matches components to contracts by name
- Flags missing required props, unhandled interaction states, and missing ARIA attributes
- Shows ✓ or ✗ on each contract in the sidebar after validation
- Glossary hover — hover over token names, CSS values (16px, 1rem, #333), or Tailwind classes to see the matching Parlance token with all framework translations
- Glossary autocomplete — context-aware completions:
- Inside
var(--) → CSS custom property names
- Inside
className="" → Tailwind class translations
- Inside
style={{}} → camelCase CSS properties
- Deep links — "Open in Parlance" opens the contract directly in the platform
| Rule |
WCAG |
Level |
What it checks |
| img-alt |
1.1.1 |
A |
Images have alt attributes |
| aria-roles |
4.1.2 |
A |
Interactive elements have correct ARIA |
| heading-order |
1.3.1 |
A |
Headings follow logical hierarchy |
| form-labels |
1.3.1 |
A |
Form controls have labels |
| contrast-ratio |
1.4.3 |
AA |
Text has sufficient contrast |
| keyboard-access |
2.1.1 |
A |
Elements are keyboard accessible |
| touch-target |
2.5.5 |
AAA |
Touch targets are 44×44px minimum |
- Install the extension
- Open a file — Phase 1 auditing works immediately, no connection required
- Run Parlance: Set API Key to connect to the platform for Phase 2 features
- Run Parlance: Select Project to bind the workspace to a Parlance project
| Setting |
Default |
Description |
parlance.auditOnSave |
true |
Auto-audit on save |
parlance.auditOnType |
false |
Audit as you type (may affect performance) |
parlance.wcagLevel |
"AA" |
Target conformance level: A, AA, or AAA |
parlance.ignoredRules |
[] |
Rule IDs to skip |
parlance.severity.contrast |
"warning" |
Severity for contrast violations |
parlance.severity.aria |
"error" |
Severity for ARIA violations |
parlance.severity.keyboard |
"warning" |
Severity for keyboard violations |
parlance.apiUrl |
https://api.parlancelabs.net |
API endpoint |
parlance.appUrl |
https://parlancelabs.net |
Platform URL for deep links |
parlance.autoSync |
true |
Auto-sync contracts/glossary on activation |
| Command |
Description |
| Parlance: Run Accessibility Audit |
Audit the active file |
| Parlance: Audit Entire Workspace |
Audit all files in the workspace |
| Parlance: Validate Component Against Contract |
Deep contract validation for the active component |
| Parlance: Sync Contracts |
Refresh contract data from the platform |
| Parlance: Sync Glossary |
Refresh glossary tokens from the platform |
| Parlance: Select Project |
Bind the workspace to a Parlance project |
| Parlance: Change Project |
Re-select the active project |
| Parlance: Set API Key |
Store your Parlance API key |
| Parlance: Clear API Key |
Disconnect from the platform |
| Parlance: Test Connection |
Verify API connectivity and key validity |
| Parlance: Clear Audit Results |
Remove all diagnostics |