Wally - Accessibility Linter

WCAG 2.2 & NBR 17.225 Validator for VS Code

Catch accessibility bugs as you code -- not after deployment.

Why Wally?

Most accessibility tools only run in the browser -- Wally catches violations inside your editor, before they ever reach production.

	Wally	Browser DevTools	CI Linters
Real-time feedback (as you type)	Yes	No	No
One-click Quick Fixes	Yes	No	No
Hover tooltips with WCAG explanations	Yes	No	No
Works inside VS Code (no context switch)	Yes	No	Yes
HTML / React / Vue / Svelte / PHP	Yes	HTML only	Varies
Project dashboard with score (0-100)	Yes	No	No
Exportable HTML reports	Yes	No	No
Free & open-source	Yes	Yes	Varies

Features

NBR 17.225 -- Brazilian Accessibility Standard

Wally is the only VS Code extension with native support for NBR 17.225, Brazil's official web accessibility standard issued by ABNT (Associacao Brasileira de Normas Tecnicas).

NBR 17.225 defines accessibility requirements for web content in Brazil, with mandatory compliance for public and government services. Wally maps every WCAG 2.2 rule to its corresponding NBR 17.225 section, giving Brazilian teams a single tool for full legal and technical compliance.

Switch standards via the Status Bar: WCAG 2.2, NBR 17.225, or both simultaneously
400+ cross-references between WCAG 2.2 success criteria and NBR 17.225 sections
NBR badges in violation cards: section code + type (R = Requisito / C = Recomendacao)
Hover tooltips include the NBR 17.225 section for every violation
Works alongside WCAG -- no need to choose one or the other

Real-Time Diagnostics

Wally's analysis engine covers 104 WCAG rules. Violations appear instantly as colored underlines every time you save:

Severity	Meaning
Critical	Blocks access for users with disabilities
Serious	Significant barrier -- must be fixed
Moderate	Causes difficulty in the experience
Minor	Improvement recommended

23 Quick Fixes -- Fix with One Click

Press Ctrl+. on any diagnostic to apply an automated fix:

Quick Fix	WCAG Rule
Add `alt` to images	`image-alt`
Add `alt` to SVG images	`svg-img-alt`
Add `title` to `<object>`	`object-alt`
Add `alt` to image map areas	`area-alt`
Add `aria-label` to elements with `role="img"`	`role-img-alt`
Add `aria-label` to buttons	`button-name`
Add `aria-label` to links	`link-name`
Add `aria-label` to selects	`select-name`
Add `aria-label` to iframes	`frame-title`
Add `<label>` to inputs	`label`
Add `lang="pt-BR"` to `<html>`	`html-has-lang`
Add `<title>` to page	`document-title`
Fix `<meta name="viewport">`	`meta-viewport`
Add `tabindex="0"` to scrollable regions	`scrollable-region-focusable`
Replace positive `tabindex` with `tabindex="0"`	`tabindex`
Add `scope="col"` to `<th>`	`th-has-data-cells`
Insert `<track kind="captions">` for video	`video-caption`
Add `controls` to `<audio>`	`audio-caption`
Add `target-size` wrapper	`target-size`
Add `<caption>` to tables	`table-duplicate-name`
Add `role` to frame	`frame-title`
Suppress rule on this line	(all rules)
Fix All in File (batch)	(all rules)

Hover Tooltips -- Understand the "Why"

Hover over any underline to see:

Rule name and WCAG criterion (e.g., 1.1.1 Level A)
Clear description of the problem and who is affected
How to fix it -- actionable, concrete guidance
Code example (before / after)
Link to official WCAG documentation
NBR 17.225 cross-reference section (e.g., 5.2.1 -- Conteudo Nao Textual (R))

Project Dashboard

Open the Wally sidebar to see your entire project at a glance:

Accessibility score (0-100) per file
Interactive stats -- click to filter by severity
Sort by criticality, problem count, score, or filename
Search files by name
Export to JSON or CSV

HTML Report Export

Generate a standalone wally-report.html with:

Overall accessibility score
File-by-file breakdown
Violation details with code snippets and line numbers
Severity breakdown

Opens automatically in your browser after export.

47+ WCAG Rules Covered

Category	Rules
Images	`image-alt`, `svg-img-alt`, `object-alt`, `area-alt`, `role-img-alt`
Forms	`label`, `select-name`, `input-button-name`, `aria-required-attr`
Buttons & Links	`button-name`, `link-name`, `link-in-text-block`
Structure	`document-title`, `html-has-lang`, `html-lang-valid`, `landmark-*`
Tables	`table-duplicate-name`, `th-has-data-cells`, `td-headers-attr`, `scope-attr-valid`
ARIA	`aria-label`, `aria-labelledby`, `aria-hidden-body`, `aria-required-children`, `presentation-role-conflict`
Navigation	`scrollable-region-focusable`, `focus-trap`, `skip-link`, `tabindex`
Color	`color-contrast`, `link-in-text-block`
Frames	`frame-title`, `frame-tested`
Multimedia	`video-caption`, `audio-caption`
Viewport	`meta-viewport`, `target-size`

Supported Languages & Frameworks

Language	Extensions	Notes
HTML	`.html`, `.htm`	Full support
React	`.jsx`, `.tsx`	JSX parser with depth tracking
Vue	`.vue`	Nested `<template>` support
Svelte	`.svelte`	Template extraction
PHP	`.php`	Strips `<?php ?>` and short tags
EJS	`.ejs`	Template literals stripped
Handlebars	`.hbs`	Mustache expressions stripped

Code Snippets

Type a11y- in any supported file to insert ready-to-use accessible patterns:

a11y-img - a11y-button - a11y-link - a11y-input - a11y-form - a11y-nav - a11y-modal - a11y-alert - a11y-icon - a11y-skip-link - a11y-html-lang

Available for HTML, React (JSX/TSX), Vue, and Svelte.

Quick Start

1. Install Wally from the VS Code Marketplace
2. Open any .html, .jsx, .tsx, .vue, .svelte, or .php file
3. Violations appear immediately as colored underlines
4. Hover over an underline -- read the full explanation
5. Press Ctrl+. -- apply a one-click Quick Fix
6. Type a11y- -- insert an accessible code snippet
7. Open the Wally sidebar -- view the project dashboard

Configuration

Search for "Wally" in VS Code Settings (Ctrl+,):

Setting	Default	Description
`wally.enabled`	`true`	Enable/disable analysis
`wally.realTimeAnalysis`	`true`	Analyze while typing
`wally.debounceDelay`	`500ms`	Delay before analysis (ms)
`wally.wcagLevel`	`"AA"`	WCAG conformance level: A, AA, or AAA
`wally.standard`	`"both"`	Standard: `wcag`, `nbr17225`, or `both`
`wally.severityLevels`	all	Which severities to show
`wally.showScoreInStatusBar`	`true`	Show score in status bar
`wally.autoFix`	`true`	Enable Quick Fix suggestions
`wally.excludePatterns`	`node_modules, dist, build`	Paths to ignore
`wally.autoScanWorkspace`	`false`	Scan all files on workspace open

Commands

Command	Shortcut	Description
`Wally: Analisar Acessibilidade do Arquivo`	--	Analyze current file
`Wally: Analisar Todos os Arquivos do Projeto`	--	Scan entire workspace
`Wally: Corrigir Todos os Problemas no Arquivo`	--	Fix All in current file
`Wally: Exportar Relatorio de Acessibilidade`	--	Generate HTML report
`Wally: Mostrar Painel de Acessibilidade`	--	Open dashboard panel
`Wally: Ir para Proximo Erro`	`F8`	Go to next violation
`Wally: Ir para Proximo Erro Critico do Projeto`	`Ctrl+Shift+F8`	Go to next critical
`Wally: Selecionar Norma de Acessibilidade`	--	Switch WCAG / NBR / Both
`Wally: Abrir Tela de Boas-Vindas`	--	Open welcome screen

FAQ

Does Wally work with React, Vue, and Svelte?

Yes. Wally includes dedicated parsers for JSX/TSX, Vue <template>, and Svelte files. It extracts the HTML structure and runs full accessibility analysis on it -- including proper depth tracking for nested components.

Is Wally free?

Yes, 100% free and open-source under the MIT license. No premium tiers, no telemetry, no ads.

How is Wally different from axe DevTools?

axe DevTools runs in the browser after your page renders. Wally runs inside your editor while you code -- catching issues before they reach the browser. Plus you get Quick Fixes, hover tooltips, a project dashboard, and HTML reports without leaving VS Code.

Can I suppress a rule for a specific line?

Yes. Press Ctrl+. on any violation and choose "Wally: Ignorar rule-id nesta linha". Wally inserts a  comment above the offending line.

Does Wally send my code to any server?

No. All analysis runs 100% locally using JSDOM. No network requests, no telemetry, no data collection.

What WCAG version does Wally support?

WCAG 2.2 (levels A, AA, and AAA). Configurable via settings. Wally also supports NBR 17.225, Brazil's official web accessibility standard.

Recursos (PT-BR)

Wally foi desenvolvido por uma equipe brasileira. Toda a interface, mensagens e documentacao estao em Portugues do Brasil.

NBR 17.225 -- Norma Brasileira de Acessibilidade

O Wally e a unica extensao VS Code com suporte nativo a NBR 17.225, a norma oficial de acessibilidade para web no Brasil, publicada pela ABNT (Associacao Brasileira de Normas Tecnicas).

A NBR 17.225 define requisitos obrigatorios e recomendacoes para conteudo web acessivel, com foco especial em servicos publicos e governamentais. O Wally mapeia cada regra do WCAG 2.2 para a secao correspondente da norma, permitindo que equipes brasileiras mantenham conformidade tecnica e legal em um unico lugar.

O que o suporte a NBR 17.225 oferece:

Alterne entre WCAG 2.2, NBR 17.225 ou ambos pela barra de status do VS Code
Mais de 400 referencias cruzadas entre criterios do WCAG 2.2 e secoes da NBR 17.225
Badges NBR nos cards de violacao: codigo da secao + tipo (R = Requisito / C = Recomendacao)
Tooltips com a secao NBR correspondente a cada violacao encontrada
Suporte simultaneo -- nao e necessario escolher entre WCAG e NBR

Por que usar o Wally?

	Wally	Browser DevTools	CI Linters
Analise em tempo real (enquanto digita)	Sim	Nao	Nao
23 Quick Fixes automaticos	Sim	Nao	Nao
Tooltips com explicacao do WCAG	Sim	Nao	Nao
Funciona dentro do VS Code	Sim	Nao	Sim
HTML / React / Vue / Svelte / PHP	Sim	Apenas HTML	Varia
Dashboard com score 0-100 por arquivo	Sim	Nao	Nao
Relatorio HTML exportavel	Sim	Nao	Nao
Suporte nativo NBR 17.225	Sim	Nao	Nao
Gratuito e open-source	Sim	Sim	Varia

Recursos

Recurso	Descricao
Analise em tempo real	Violacoes aparecem como sublinhados coloridos a cada salvamento
23 Quick Fixes	Corrija com um clique -- `Ctrl+.`
Tooltips explicativos	Nome da regra, criterio WCAG, como corrigir, exemplo de codigo
NBR 17.225	Unica extensao VS Code com suporte nativo a norma brasileira
Dashboard do projeto	Score de acessibilidade de 0 a 100 por arquivo
Relatorio HTML	Relatorio standalone com score, detalhes e trechos de codigo
Snippets acessiveis	Digite `a11y-` para inserir componentes prontos e acessiveis
47+ regras WCAG	Imagens, formularios, ARIA, navegacao, cor, tabelas e mais
100% gratuito	Sem versao premium, sem telemetria, sem anuncios

Como comecar

Instale pelo VS Code Marketplace
Abra qualquer arquivo .html, .jsx, .tsx, .vue, .svelte ou .php
Violacoes aparecem imediatamente como sublinhados coloridos
Passe o mouse sobre um sublinhado -- leia nome da regra, criterio WCAG, secao NBR e como corrigir
Pressione Ctrl+. -- aplique um Quick Fix automatico
Digite a11y- -- insira um snippet de componente acessivel
Abra a sidebar Wally -- veja o dashboard e o score do projeto

Configuracao

Busque por "Wally" nas Configuracoes do VS Code (Ctrl+,):

Configuracao	Padrao	Descricao
`wally.enabled`	`true`	Ativar/desativar analise
`wally.standard`	`"both"`	Norma: `wcag`, `nbr17225` ou `both`
`wally.wcagLevel`	`"AA"`	Nivel WCAG: A, AA ou AAA
`wally.realTimeAnalysis`	`true`	Analisar enquanto digita
`wally.autoFix`	`true`	Ativar sugestoes de Quick Fix
`wally.excludePatterns`	`node_modules, dist`	Caminhos a ignorar

Comandos

Comando	Descricao
`Wally: Analisar Acessibilidade do Arquivo`	Analisar arquivo atual
`Wally: Analisar Todos os Arquivos do Projeto`	Escanear workspace inteiro
`Wally: Corrigir Todos os Problemas no Arquivo`	Corrigir tudo no arquivo
`Wally: Exportar Relatorio de Acessibilidade`	Gerar relatorio HTML
`Wally: Mostrar Painel de Acessibilidade`	Abrir o dashboard
`Wally: Ir para Proximo Erro`	Proxima violacao (`F8`)
`Wally: Ir para Proximo Erro Critico do Projeto`	Proximo critico (`Ctrl+Shift+F8`)
`Wally: Selecionar Norma de Acessibilidade`	Alternar WCAG / NBR / Ambos

Security & Privacy

100% local -- no network requests during analysis
No telemetry -- no data collection whatsoever
Sandboxed -- JSDOM runs with runScripts: 'outside-only'
Open source -- audit the code yourself on GitHub

Contributing

Fork the repository on GitHub
Create a feature branch: git checkout -b feat/my-feature
Commit using Conventional Commits: git commit -m 'feat: add rule xyz'
Push and open a Pull Request

Bug reports and rule suggestions -- open an issue

Credits

WCAG 2.2 -- W3C Web Content Accessibility Guidelines
NBR 17.225 -- ABNT Brazilian Accessibility Standard
VS Code Extension API -- Microsoft

Developed by Equallyze Solutions

MIT License -- free to use, modify, and distribute.

If Wally helps you build more accessible software, please leave a review.

Wally - A11y Checker & WCAG 2.2 / NBR 17.225 Validator

Equallyze Solutions