Nos termos do próprio skill
Este skill audita e corrige a acessibilidade web conforme a WCAG 2.2, organizado em torno de POUR — Perceivable, Operable, Understandable, Robust — e dos níveis de conformidade A, AA e AAA. Ele executa um fluxo de trabalho baseado em evidências: quando há uma página renderizada disponível, execute uma auditoria de acessibilidade Lighthouse ao vivo (lighthouse_audit com Chrome DevTools MCP), use os nós com falha para localizar o componente, inspecione a árvore de acessibilidade com take_snapshot e depois corrija o código-fonte e execute tudo de novo.
Se as ferramentas ao vivo não estiverem disponíveis, o Lighthouse CLI ou o axe cobrem a metade automatizada, e as mesmas verificações manuais continuam valendo. Ele traz regras em nível de código para texto alternativo, taxas de contraste, visibilidade do foco, tamanho do alvo, movimento reduzido, erros de formulário e autenticação acessível, além de uma lista de triagem classificada em crítica, séria e moderada.
O que ele produz
- Uma lista de problemas priorizada, agrupada nos níveis Crítico (corrigir imediatamente), Sério (corrigir antes do lançamento) e Moderado (corrigir em breve), com exemplos nomeados.
- Marcação corrigida e trechos prontos para colar, incluindo um utilitário visualmente oculto para expor rótulos de botões de ícone às tecnologias assistivas.
- Implementações de referência completas em references/A11Y-PATTERNS.md, abrangendo rótulos de formulário, aprisionamento de foco em modal, link de salto, abas ARIA, regiões dinâmicas, tratamento de erros e comandos de leitor de tela.
Como funciona
- 01Execute uma auditoria de acessibilidade ao vivo
Comece com uma página renderizada e execute uma auditoria de acessibilidade Lighthouse ao vivo, usando o modo de navegação móvel para páginas públicas em geral ou o modo snapshot quando recarregar faria perder o estado autenticado.
- 02Localize o componente com falha
Use os nós com falha da auditoria para apontar o componente ou template específico, em vez de rodar grep no repositório inteiro em busca de padrões genéricos.
- 03Inspecione a árvore de acessibilidade
Leia um snapshot renderizado da árvore de acessibilidade para verificar nomes, funções, estados, marcos e estrutura de títulos, e depois percorra o fluxo afetado com o teclado.
- 04Corrija o código-fonte e verifique novamente
Altere o código-fonte em vez da saída renderizada, depois repita a mesma auditoria e a mesma interação manual para confirmar a correção.
- 05Recorra às ferramentas de CLI
Quando as ferramentas de navegador ao vivo não estiverem disponíveis, combine a saída do Lighthouse CLI ou do axe com as mesmas verificações manuais, porque a automação sozinha cobre apenas parte das barreiras.