Visão geral
Anotação de Acessibilidade é uma técnica de entrega usada para eliminar ambiguidade entre design e desenvolvimento sobre comportamentos de acessibilidade — garantindo que intenções de ordem de foco, semântica e interação por teclado sejam implementadas corretamente sem depender de suposição do desenvolvedor. A utilidade dela está menos no ritual em si e mais na forma como ajuda o time a transformar uma dúvida de projeto em evidências, decisões ou próximos passos observáveis.
Ela faz sentido quando use antes de entregar designs para desenvolvimento, ao criar componentes de design system, ou ao revisar fluxos críticos onde acessibilidade é requisito — não como auditoria pós-implementação. Ao aplicar Anotação de Acessibilidade, o time deve chegar a arquivo de design anotado com especificações de acessibilidade e Guia de implementação para desenvolvedor, mantendo rastreabilidade entre o que foi observado, o que foi decidido e quais limites ainda precisam ser considerados.
Como entra no fluxo
Anotação de Acessibilidade entra quando já existe uma pergunta de trabalho clara e o time precisa conduzir uma atividade estruturada antes de avançar para decisão, protótipo, priorização ou entrega.
Atenção ao usar
Anotação não garante implementação correta — precisa de revisão após desenvolvimento.
Combina bem com
Para que serve
Eliminar ambiguidade entre design e desenvolvimento sobre comportamentos de acessibilidade — garantindo que intenções de ordem de foco, semântica e interação por teclado sejam implementadas corretamente sem depender de suposição do desenvolvedor.
Quando usar
Use antes de entregar designs para desenvolvimento, ao criar componentes de design system, ou ao revisar fluxos críticos onde acessibilidade é requisito — não como auditoria pós-implementação.
Contexto
Objetivos
Outputs
Situações ideais
- equipe desalinhada
Como executar
Pré-requisitos
- Designs finalizados ou em fase de refinamento
- Conhecimento básico de WCAG e ARIA pelo designer
- Plugin ou ferramenta de anotação no ambiente de design
Materiais
- Plugin de anotação (Figma Accessibility Annotation Kit, Stark)
- Guia de referência ARIA e WCAG
- Checklist de componentes interativos
Passo a passo
- 1Identifique todos os elementos interativos no fluxo.
- 2Anote a ordem de foco de teclado com números sequenciais.
- 3Especifique rótulos ARIA para ícones, imagens e controles sem texto visível.
- 4Documente comportamentos de teclado — Enter, Space, Escape, setas.
- 5Indique regiões de landmarks e hierarquia de headings.
- 6Especifique estados — hover, focus, active, disabled, error — com contraste adequado.
- 7Revise com desenvolvedor antes de implementar.
Critérios de qualidade
- Toda imagem não decorativa tem texto alternativo especificado
- Ordem de foco é lógica e corresponde à ordem visual de leitura
- Controles interativos têm nome acessível explícito
- Comportamentos de teclado cobrem navegação e ativação dos controles
Dicas
- Use kit de anotação padronizado — reduce tempo e aumenta consistência.
- Anote durante o design, não no final — muda decisões enquanto ainda é barato.
- Inclua desenvolvedor na revisão das anotações antes de implementar.
- Foque nos fluxos críticos primeiro — não precisa anotar tudo de uma vez.
Antes (entradas)
- Designs finalizados
- Critérios de acessibilidade do produto
Depois (saídas)
- Arquivo de design anotado com especificações de acessibilidade
- Guia de implementação para desenvolvedor
Variações
Anotação de Design System
Anotações aplicadas a componentes do design system — cada componente documenta comportamento acessível esperado, servindo como referência para todos os times que usam o sistema.
Uso estratégico
Quando evitar
- Design ainda está em exploração — espere maior fidelidade para anotar
- Desenvolvedor tem expertise de acessibilidade suficiente para implementar sem anotação
Limitações
- Anotação não garante implementação correta — precisa de revisão após desenvolvimento
- Exige conhecimento de acessibilidade pelo designer — curva de aprendizado real
Riscos
- Anotações incorretas gerando implementação incorreta com falsa segurança
- Designer anotar sem testar com leitor de tela — especificação baseada em suposição
Exemplos de uso
- 01Anotar fluxo de cadastro com ordem de foco e rótulos ARIA antes de sprint de dev.
- 02Documentar comportamento de teclado de menu dropdown complexo.
- 03Criar anotações padrão para biblioteca de componentes do design system.
Perfis responsáveis
Também conhecido como
Referências e leitura
Ajude a melhorar este conteúdo
Encontrou erro, lacuna técnica ou exemplo fraco? Envie uma correção com contexto para revisão.