Contexto
A posição da mensagem influencia a capacidade de encontrar, compreender e corrigir o erro. Uma mensagem distante pode passar despercebida ou não deixar claro qual campo precisa de atenção.
Use uma mensagem contextual próxima ao campo com erro. Em formulários longos ou com vários problemas, adicione um resumo no topo com links que levem diretamente aos campos afetados. Depois do envio, leve o foco ao resumo ou ao primeiro campo inválido, conforme o comportamento mais adequado ao fluxo. Preserve os dados já preenchidos.
Use uma mensagem global apenas quando o problema afetar o formulário ou o serviço inteiro e não puder ser associado a um campo específico.
Porque isso importa?
A mensagem próxima ao campo reduz a dúvida sobre onde agir. O resumo facilita a localização dos problemas, especialmente em formulários longos ou para quem navega por teclado ou leitor de tela.
A WCAG não obriga uma única posição, mas exige que o erro seja identificado e descrito em texto. A combinação entre mensagem contextual e resumo navegável ajuda diferentes pessoas a localizar e corrigir os erros sem repetir o preenchimento.
Quando usar?
- Mensagem junto ao campo para erros específicos.
- Resumo no topo quando houver vários erros.
- Links no resumo para levar aos campos afetados.
- Foco no primeiro erro após o envio.
- Mensagem global para falhas que afetem todo o fluxo.
- Mensagem contextual para feedback relacionado a um componente.
Quando evitar?
- Deixar o erro somente no topo.
- Colocar a mensagem distante do campo.
- Usar modal para validação comum.
- Usar toast para erro que precisa ser corrigido.
- Remover os dados preenchidos após o erro.
- Exibir várias mensagens globais desconectadas.
Recomendações
Faça
- Associe o erro ao campo.
- Resuma vários erros.
- Aponte para o campo.
- Preserve os dados.
- Foque o primeiro erro.
- Reserve mensagens globais.
Evite
- Não deixe só no topo.
- Não esconda o erro no rodapé.
- Não use modal para validação comum.
- Não use toast para erro persistente.
- Não remova o preenchimento.
- Não repita mensagens desconectadas.
