ricardonevesbraga/flowgrammers-skills/a11y-audit

# 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

/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

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

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

// ANTES: src/components/ProductCard.tsx
function ProductCard({ product }) {
  return (
    <div onClick={() => 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>
  );
}

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

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)