A11Y Audit

Auditoria de Acessibilidade

Skill de Auditoria e Remediação de Acessibilidade WCAG 2.2

Descrição

A skill a11y-audit fornece um pipeline completo de auditoria de acessibilidade para aplicações web modernas. Implementa um fluxo de trabalho em três fases — Escanear, Corrigir, Verificar — que identifica violações WCAG 2.2 Nível A e AA, gera código de correção preciso por framework e produz relatórios de conformidade prontos para partes interessadas.

Para cada violação encontrada, fornece o código de correção preciso antes/depois, adaptado ao seu framework (React, Next.js, Vue, Angular, Svelte ou HTML puro).

O que esta skill faz:

1. Escaneia seu codebase em busca de todas as violações WCAG 2.2 Nível A e AA, categorizadas por severidade (Crítica, Maior, Menor)
2. Corrige cada violação com padrões de código antes/depois específicos para o framework
3. Verifica que as correções resolvem as violações originais e não introduzem regressões
4. Reporta os resultados em formato estruturado adequado para desenvolvedores, PMs e partes interessadas em conformidade
5. Integra em pipelines CI/CD para prevenir regressões de acessibilidade

Funcionalidades

Definições de Severidade

Uso

Início Rápido

# Escanear projeto inteiro
python scripts/a11y_scanner.py /path/to/project

# Escanear com saída JSON para ferramentas
python scripts/a11y_scanner.py /path/to/project --json

# Verificar contraste de cores para valores específicos
python scripts/contrast_checker.py --fg "#777777" --bg "#ffffff"

# Verificar contraste em um arquivo CSS/Tailwind
python scripts/contrast_checker.py --file /path/to/styles.css

Slash Command

/a11y-audit                    # Auditar o projeto atual
/a11y-audit --scope src/       # Auditar diretório específico
/a11y-audit --fix              # Auditar e aplicar correções automaticamente
/a11y-audit --report           # Gerar relatório para partes interessadas
/a11y-audit --ci               # Saída de resultados compatível com CI

Fluxo de Trabalho em Três Fases

Fase 1: Escanear — Percorrer a árvore de código-fonte, detectar framework, aplicar conjunto de regras.

python scripts/a11y_scanner.py /path/to/project --format table

Fase 2: Corrigir — Aplicar correções específicas para o framework em cada violação.

Veja references/framework-a11y-patterns.md para o catálogo completo de padrões de correção.

Fase 3: Verificar — Executar novamente o scanner para confirmar as correções e verificar regressões.

python scripts/a11y_scanner.py /path/to/project --baseline audit-baseline.json

Exemplo: Auditoria de Componente React

// ANTES: src/components/ProductCard.tsx
function ProductCard({ product }) {
  return (
    <div => navigate(`/product/${product.id}`)}>
      <img src={product.image} />
      <div style={{ color: '#aaa', fontSize: '12px' }}>{product.name}</div>
      <span style={{ color: '#999' }}>${product.price}</span>
    </div>
  );
}

// DEPOIS: src/components/ProductCard.tsx
function ProductCard({ product }) {
  return (
    <a href={`/product/${product.id}`} className="product-card"
       aria-label={`View ${product.name} - $${product.price}`}>
      <img src={product.image} alt={product.imageAlt || product.name} />
      <div style={{ color: '#595959', fontSize: '12px' }}>{product.name}</div>
      <span style={{ color: '#767676' }}>${product.price}</span>
    </a>
  );
}

Veja references/examples-by-framework.md para exemplos em Vue, Angular, Next.js e Svelte.

Referência de Ferramentas

a11y_scanner.py

Uso: python scripts/a11y_scanner.py <caminho> [opções]

Opções:
  --json                  Saída dos resultados como JSON
  --format {table,csv}    Formato de saída (padrão: table)
  --severity {critical,major,minor}  Filtrar por severidade mínima
  --framework {react,vue,angular,svelte,html,auto}  Forçar framework (padrão: auto)
  --baseline FILE         Comparar com resultados de escaneamento anteriores
  --report                Gerar relatório para partes interessadas
  --output FILE           Escrever resultados em arquivo
  --quiet                 Suprimir saída, apenas código de saída
  --ci                    Modo CI: saída não-zero em problemas críticos

contrast_checker.py

Uso: python scripts/contrast_checker.py [opções]

Opções:
  --fg COLOR              Cor de primeiro plano (hex)
  --bg COLOR              Cor de segundo plano (hex)
  --file FILE             Escanear arquivo CSS para pares de cores
  --tailwind DIR          Escanear diretório para classes de cores Tailwind
  --json                  Saída dos resultados como JSON
  --suggest               Sugerir alternativas acessíveis para falhas
  --level {aa,aaa}        Nível de conformidade alvo (padrão: aa)

Armadilhas Comuns

Skills Relacionadas

Documentação de Referência

Recursos

• WCAG 2.2 Specification
• WAI-ARIA Autoring Practices 1.2
• Deque axe-core Rules
• eslint-plugin-jsx-a11y