Mensagem de erro descritiva
O que a norma pede
Mensagens de erro dizem em texto qual é o erro e em qual campo ele está.
- 3.3.1 (A)
Parecido na NBR 17060
A NBR 17060 trata de aplicativos. Se o seu serviço também tem app, veja o que a Bússola da NBR 17060 diz sobre o mesmo assunto:
Visões por perfil
Escolha um perfil para ver o que o requisito pede de quem ocupa esse papel:
Mostre a mensagem de erro em texto, perto do campo, com ícone além da cor. Em formulários longos, acrescente um resumo no topo com links para os campos com erro.
Erro no CPF
A pessoa digitou o CPF incompleto.
Errado: Só borda vermelha
Estado de erro
Borda do campo em vermelho.
Não diz o que corrigir e depende de cor.
Certo: Mensagem no campo
Estado de erro
Ícone de alerta + “CPF incompleto: digite os 11 números.” abaixo do campo.
A pessoa sabe o que e onde corrigir.
Associe a mensagem ao campo com aria-describedby e marque o campo com aria-invalid="true". Ao enviar com erros, leve o foco ao resumo ou ao primeiro erro.
Erro no CPF
Implementação do estado de erro.
Errado: Só estilo
<input id="cpf" class="borda-vermelha">Nada é anunciado.
Certo: Erro associado
<input id="cpf" aria-invalid="true" aria-describedby="cpf-erro"> <p id="cpf-erro">CPF incompleto: digite os 11 números.</p>O leitor anuncia o campo, o estado e o erro.
Inclua mensagens de erro específicas nos critérios de aceite e proíba mensagens genéricas como “Erro no formulário”. Mapeie os erros mais frequentes e revise as mensagens deles.
Chamados sobre erro no cadastro
O suporte recebe muitos chamados “não consigo me cadastrar”.
Errado: Mensagem genérica
Situação
“Dados inválidos.” sem indicar o campo.
A pessoa desiste ou liga.
Certo: Mensagem específica
Situação
Cada campo diz seu erro; resumo no topo.
Os chamados diminuem.
Envie o formulário com erros de propósito. Cada erro deve aparecer em texto junto do campo e ser anunciado pelo leitor de tela; o resumo precisa levar até o campo.
Envio com erros
Teste com leitor de tela.
Errado: Erro silencioso
Enter em “Enviar” → nada é anunciado
Tab → “CPF, campo de edição”
A pessoa não sabe que errou.
Certo: Erro anunciado
“2 erros. CPF incompleto. E-mail sem @.”
Tab → “CPF, inválido, CPF incompleto: digite os 11 números.”
Erro claro e localizável.
Diga na mensagem qual é o problema e em qual campo, como “E-mail sem @”, em linguagem simples e sem culpar a pessoa. Evite “inválido” sozinho e códigos técnicos.
Erro no e-mail
A pessoa digitou o e-mail sem @.
Errado: Genérica
Mensagem
“Campo inválido.”
Não diz qual nem por quê.
Certo: Específica
Mensagem
“E-mail: está faltando o @.”
Diz o campo e o problema.