Depois de enviar um formulário, a pessoa precisa saber se o pedido chegou. Quando há erros, também precisa entender quais campos corrigir e como fazê-lo. Um botão que simplesmente volta ao topo ou muda de cor não confirma o resultado.
Mostre os erros junto do campo e numa lista resumida
Quando o envio falhar, informe o problema perto do campo e, se houver mais de um, apresente uma lista no início do formulário. Cada item deve indicar o campo pelo mesmo nome do rótulo e, quando útil, oferecer um link que leve até ele.
<p id="email-error">Informe um endereço de email válido.</p>
<label for="email">Email</label>
<input id="email" name="email" type="email" aria-describedby="email-error" aria-invalid="true">Não use só uma borda vermelha para sinalizar o erro. Escreva como resolver, diga se o campo é obrigatório e preserve os valores que já estavam corretos. A W3C WAI recomenda mensagens concisas, associadas aos campos, com instruções de correção.
Leve o foco até o problema
Após uma resposta do servidor ou uma validação dinâmica, confira se o erro novo é percebido. Em formulários longos, mover o foco para o resumo pode ajudar; outra opção é focar o primeiro campo inválido, desde que a mudança não surpreenda e o leitor de tela receba a informação.
Para conteúdo atualizado sem recarregar a página, a mensagem precisa ser anunciada de forma apropriada por tecnologias assistivas. Teste com teclado e leitor de tela: um alerta excessivamente agressivo em cada tecla pode interromper a tarefa. Não acrescente roles ARIA sem verificar se o comportamento real corresponde ao papel anunciado.
Confirme sucesso com um estado específico
Após o servidor aceitar o envio, mostre uma confirmação que explique o que aconteceu e o que vem depois — por exemplo, prazo esperado de resposta, número de protocolo ou uma alternativa de contato. Não trate o clique no botão como prova de recebimento. O resultado deve corresponder ao que o backend realmente confirmou.
Se o formulário usa uma página de agradecimento, confira se a conversão só é registrada depois de um envio bem-sucedido. O artigo sobre medir envios de formulário com sucesso diferencia clique, tentativa e confirmação.
Roteiro de teste
- Envie o formulário sem preencher um campo obrigatório.
- Use um dado em formato inválido e confira a explicação.
- Confirme que os campos corretos mantêm os valores.
- Navegue até o resumo, abra o campo apontado e corrija-o.
- Envie dados válidos e confira a confirmação somente após o recebimento.
- Repita com teclado e leitor de tela, em celular e computador.
Baseado no tutorial WAI de validação e notificações de formulário e na orientação de notificações. A validação do navegador facilita a correção, mas dados ainda precisam ser validados no servidor; este guia não substitui teste do processamento que recebe as informações.