Auditoria de Acessibilidade

Quando Usar

Use esta habilidade quando precisar auditar um componente ou página em busca de problemas de acessibilidade e corrigi-los.

Quando NÃO Usar

• Para revisão geral de conformidade do sistema de design → use /ss-review
• Para heurísticas de UX de Nielsen → use /ss-audit
• Para código que não é StyleSeed (sem data-slot, sem tokens semânticos) — assume convenções do StyleSeed
• Para testes em tempo de execução — esta é uma auditoria de código estática, não uma simulação de leitor de tela

Alvo: $ARGUMENTS

Critérios de Auditoria

Conformidade WCAG 2.2 AA

1. Perceptível

• Contraste de cores: O texto deve atender a 4.5:1 (normal) ou 3:1 (texto grande/negrito)
  • Verifique text-muted-foreground (#717182) em bg-background (#FFFFFF) = 4.6:1 (aprovado)
  • Verifique text-brand em branco (verifique o contraste com a cor da marca da sua skin)
  • Sinalize quaisquer cores personalizadas que não atendam à proporção
• Contraste não textual: Controles/gráficos de UI devem atender a 3:1
• Alternativas de texto: Todos os <img> precisam de alt, ícones precisam de aria-label quando significativos
• Independência de cor: Não transmita informações apenas por cor (adicione ícones/texto)

2. Operável

• Alvos de toque: Mínimo de 44x44px (min-h-11 min-w-11)
  • Violação comum: botões de h-9 (36px) — devem ser h-11
  • Botões de ícone precisam de tamanho explícito: w-11 h-11
• Navegação por teclado: Todos os elementos interativos devem ser acessíveis por teclado
  • A ordem de tabulação deve ser lógica
  • focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
• Movimento: Animações devem respeitar prefers-reduced-motion

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }
  

3. Compreensível

• Rótulos: Campos de formulário devem ter rótulos visíveis ou aria-label
• Mensagens de erro: Erros de formulário devem ser associados programaticamente (aria-describedby)
• Idioma: <html lang="en"> (ou código de idioma apropriado para seu projeto)

4. Robusto

• HTML Semântico: Use elementos apropriados (<button>, <nav>, <main>, <header>)
• ARIA: Use componentes Radix UI (eles lidam com ARIA automaticamente)
• Roles: Elementos interativos personalizados precisam de atributos role adequados

Referência de Tokens do Sistema de Design

Saída

1. Problemas encontrados: Lista com severidade (Crítico/Grave/Menor)
2. Correções automáticas: Aplique correções diretamente onde for possível
3. Revisão manual necessária: Sinalize itens que precisam de julgamento humano

Exemplo

Solicitação do usuário:

Auditar um componente ou página em busca de problemas de acessibilidade e corrigi-los.

Limitações

• Use esta habilidade apenas quando a tarefa corresponder claramente à sua origem e ao contexto do projeto local.
• Verifique comandos, código gerado, dependências, credenciais e comportamento de serviços externos antes de aplicar alterações.
• Não trate exemplos como substitutos para testes específicos do ambiente, revisão de segurança ou aprovação do usuário para ações destrutivas ou custosas.