5.1.2.15 - Requisitos para indicação e correção de erros de interação
Descrição
A aplicação deve informar ao usuário os erros de interação e dar a oportunidade de corrigir o erro sem prejuízo do uso da aplicação. As informações referentes aos erros do usuário devem ser claras, e a aplicação deve permitir a sua correção.
Exemplo
Um formulário que requer dados de um campo obrigatório que não foi preenchido exibe um aviso ao usuário sobre a necessidade do seu preenchimento e leva o foco do usuário para o respectivo campo, sem limpar os demais campos
Desempenho funcional
Componentes aplicáveis
Cenários para desenvolvimento de interfaces
Escolha um perfil para ver as orientações específicas:
Crie interfaces que apresentem mensagens de erro de maneira clara e destacada, com instruções específicas para correção. Assegure que o design dos campos em erro seja intuitivo e facilite ao usuário identificar e corrigir o problema sem atrapalhar a experiência de uso.
Mostre o erro no campo e como corrigir
Mensagem perto do campo, com ícone e texto, sem apagar o que foi preenchido.
Certo: Erro claro e local
anotação de especificação
Abaixo do campo: ícone ⚠ + "Informe um e-mail no formato nome@dominio.com". Demais campos mantidos.
Errado: Erro genérico no topo
anotação de especificação
"Erro no formulário" no topo, sem indicar o campo; campos limpos.
Implemente validações no código que não apenas detectem erros, mas também informem o usuário de maneira clara e ofereçam orientações para correção. Permita que o usuário faça ajustes sem perder dados ou reiniciar processos, garantindo uma experiência de uso tranquila.
O que o leitor de tela anuncia
Marque o campo como inválido, ligue a mensagem e leve o foco até ele.
Certo: Erro associado
<input id="email" aria-invalid="true" aria-describedby="erro"> <p id="erro">Use o formato nome@dominio.com</p> <!-- foco levado ao campo -->Leitor de tela anuncia: "E-mail, inválido, Use o formato nome@dominio.com"
Errado: Erro desconectado
<p class="erro">Dados inválidos</p> <input id="email">Leitor de tela anuncia: "E-mail, campo de edição": sem erro
Aprenda a fazer com conteúdos selecionados para você
Assegure que a equipe adote boas práticas de acessibilidade e usabilidade ao comunicar erros de interação, oferecendo feedback claro e opções para correção, o que contribui para uma experiência de uso positiva e inclusiva para todos os usuários.
Revise todas as mensagens de erro
Cada erro deve dizer o problema, a correção e não apagar dados.
Checklist do requisito 5.1.2.15: formulário "Cadastro"
- com correção
E-mail inválido
mensagem de erro
- foco no campo
Campo obrigatório
mensagem de erro
- pendente
Senha fraca
mensagem de erro
2 de 3 mensagens em conformidade, 1 pendente de revisão.
Identificar os pontos de possível erro
Mapeie todos os formulários e interações onde o usuário pode cometer erros, como preenchimento de campos obrigatórios, formato de dados incorreto ou ações inválidas.
Exibir mensagens de erro claras
Certifique-se de que as mensagens de erro sejam compreensíveis, descritivas e indiquem claramente o problema e a solução. Por exemplo, "O campo de e-mail está vazio. Por favor, insira um e-mail válido."
Destacar visualmente os erros
Perceba se há indicadores visuais em caso de erro, como bordas vermelhas em campos com erro ou ícones de aviso, para ajudar os usuários a identificar rapidamente onde ocorreu o problema.
Fornecer instruções de correção
As mensagens de erro devem incluir instruções sobre como corrigir o erro. Por exemplo, "Insira uma senha com pelo menos 8 caracteres."
Manter o foco nos campos com erro
Após a submissão de um formulário, perceba se o foco move-se automaticamente para o primeiro campo com erro, ajudando o usuário a corrigi-lo de forma eficiente.
Oferecer opções de correção
Sempre que possível, forneça opções de preenchimento automático ou sugestões para corrigir o erro de maneira mais prática.
Testar a experiência do usuário
Realize testes com diferentes perfis de usuários, incluindo pessoas que utilizam tecnologias assistivas, para confirmar que as mensagens de erro são claras e que a interação de correção é intuitiva e funcional.
Erre de propósito
Envie o formulário com erros e confira anúncio, foco e dados preservados.
Certo: Correção guiada
"E-mail, inválido, Use o formato nome@dominio.com"
Foco no campo com erro
Outros campos mantidos
A pessoa corrige e segue.
Errado: Pessoa perdida
erro não anunciado
Foco volta ao topo
Todos os campos apagados
A pessoa recomeça do zero.
Redija mensagens de erro claras e diretas, de forma que explique o problema e oriente sobre a forma correta de preenchimento. Evite jargões e seja específico nas instruções de correção, ajudando o usuário a corrigir o erro sem frustrações.
Diga o problema e a solução
Mensagens de erro específicas, sem jargão e com o formato esperado.
Certo: Mensagem útil
mensagem de erro
"A senha precisa ter pelo menos 8 caracteres. Faltam 3."
Problema e caminho da correção.
Errado: Mensagem inútil
mensagem de erro
"Erro 422" · "Entrada inválida"
Não diz o que corrigir.
Requisitos relacionados
Outros requisitos que se aplicam aos mesmos componentes.