promovaweb Acessibilidade web
Quando usar
- Acionar ao implementar ou auditar páginas, componentes, formulários, dashboards, mídia e fluxos críticos contra WCAG e semântica da plataforma.
- Acionar para bugs de teclado, foco, nome acessível, contraste, zoom, reflow, leitor de tela ou outras tecnologias assistivas.
- Não acionar apenas para preferência visual sem barreira observável; usar
$specsfy-specialist-ui-design. - Combinar com a skill do framework para corrigir o código sem transferir a responsabilidade de conformidade ao framework.
Fluxo
- Descobrir política, nível WCAG, navegadores, tecnologias assistivas, público e fluxos críticos; separar auditoria de conformidade de teste de usabilidade.
- Inventariar barreiras por estrutura, percepção, teclado, foco, formulário, atualização dinâmica, mídia e autenticação usando references/standards.md.
- Corrigir HTML e comportamento nativos antes de adicionar ARIA ou widget customizado; verificar nome, papel, valor, estado e relações calculados.
- Implementar teclado, ordem lógica, foco visível, foco não encoberto e gestão após abertura, fechamento, navegação e atualização assíncrona.
- Validar contraste, zoom, reflow, espaçamento de texto, target size, forced colors, orientação, movimento e alternativas de mídia.
- Executar análise automática e inspeção manual; classificar cada achado por critério, impacto, caminho de reprodução e correção verificável.
- Exercitar tarefas críticas com tecnologia assistiva representativa e documentar cobertura, limitações, exceções e risco residual.
Padrões
- Nenhuma ação depende apenas de hover, cor, gesto ou pointer preciso.
- Todo controle tem nome, papel, valor e estado corretos.
- Modal prende foco, fecha por mecanismo previsível e devolve foco.
- Erros são associados aos campos e resumidos quando necessário.
- Updates assíncronos anunciam somente informação relevante.
- Charts oferecem texto/tabela equivalente e não dependem de cor.
- ARIA nunca corrige semântica nativa incorreta.
Antipadrões
- Declarar conformidade porque axe ou um linter zerou; automação não confirma ordem de foco, linguagem, alternativas equivalentes ou fluxo completo.
- Aplicar
role,tabindexe handlers adivquando um elemento nativo cobre o contrato; recria parcialmente teclado e semântica do browser. - Usar
aria-labelpara substituir texto visível sem necessidade; nomes divergentes quebram reconhecimento por voz e manutenção. - Mover foco em toda atualização assíncrona; interrompe leitura e contexto. Anuncie status proporcional e mova foco somente quando a tarefa exigir.
- Ocultar overflow para “resolver” reflow; o conteúdo continua inacessível, apenas deixa de ser alcançável visualmente.
Validação
- Executar fluxo completo por teclado, sem armadilha, perda ou foco encoberto; conferir ordem e retorno de foco em overlays.
- Verificar resize de texto a 200% e reflow equivalente a 320 CSS px para conteúdo vertical, além de spacing de texto e orientação suportada.
- Medir contraste de texto, componentes e indicadores de foco e testar forced colors e reduced motion quando aplicáveis.
- Combinar axe/linter com inspeção do accessibility tree e leitor de tela nos fluxos de maior risco.
- Não declarar conformidade WCAG sem mapear critérios, escopo, evidência, limitações e exceções; “acessível” não é sinônimo de teste automatizado verde.
Skills relacionadas
$specsfy-specialist-react-ui-componentse$specsfy-specialist-shadcn-uifornecem componentes que esta skill audita por semântica, foco, teclado e nome acessível.$specsfy-specialist-tailwind-cssimplementa contraste, forced colors, reflow e reduced motion nos utilitários e tokens observados.$specsfy-specialist-ui-designgoverna hierarquia, tokens e estados visuais que precisam satisfazer contraste, reflow e foco.$specsfy-specialist-ux-designpesquisa compreensão e sucesso de tarefa, inclusive com pessoas que usam tecnologias assistivas.$specsfy-specialist-reacte$specsfy-specialist-astroou$specsfy-specialist-nextjsimplementam a correção no framework observado.$specsfy-specialist-code-reviewamplia a revisão para riscos além do recorte de acessibilidade.
Leia references/standards.md para critérios WCAG 2.2, contratos de componentes, formulários, conteúdo dinâmico e matriz de testes.