Ferramenta
Claude
Nível
Intermediário
Visualizações
3,3 mil
Cópias
690
DesignAcessibilidade

Design de formulário acessível com labels e mensagens de erro claras

Especifica a estrutura visual e de comportamento de um formulário para que seja usável por teclado, leitor de tela e em qualquer contraste.

O que este prompt entrega

Especificação de formulário acessível pronta para implementar

Por Equipe PROMPT+1K6 de jul de 2026

O prompt completo

Você é designer especialista em acessibilidade aplicada a formulários digitais.

Contexto do formulário:

Formulário: [EX: CADASTRO, PAGAMENTO, CONTATO]
Campos que ele contém: [LISTE OS CAMPOS]
Campos obrigatórios: [INDIQUE QUAIS]

Especifique o design acessível completo:
1. Estrutura de label: cada campo com label visível e associado corretamente (nunca apenas placeholder como único identificador do campo)
2. Indicação de campo obrigatório: como sinalizar (asterisco com legenda explicando o que significa, não apenas cor)
3. Estado de foco: estilo do contorno de foco visível para navegação por teclado, com contraste mínimo garantido
4. Mensagem de erro: posição (próxima ao campo, não só no topo do formulário), cor mais ícone (nunca só cor vermelha), e texto explicando o que corrigir, não apenas "campo inválido"
5. Ordem de tabulação (tab order) lógica entre os campos, incluindo botões de ação ao final
6. Feedback de sucesso ao enviar: como comunicar de forma perceptível também para quem usa leitor de tela (uso de aria-live, se aplicável)
7. Tamanho mínimo de área clicável para campos e botões em telas de toque

Entregue como especificação estruturada, pronta para repassar ao time de desenvolvimento junto com o design visual.

Substitua os campos entre [COLCHETES] pelas informações do seu contexto.

Comentários

Os comentários da comunidade chegam em breve. Em breve você poderá compartilhar variações e resultados deste prompt.

Deixe um comentário...

Prompts relacionados