WCAG simplificado: como facilitar a identificação e a correção de erros em formulários

Ilustração de uma tela de computador bem grande e mensagem de alerta saindo dela. Ao seu redor, há desenhos de duas pessoas com pontos de interrogação próximos às duas cabeças. Uma delas olha para a tela com as mãos para o alto e a outra está sentada no chão mexendo no laptop que está sobre suas pernas.

Formulários estão por toda parte no mundo digital, desde um cadastro simples para baixar um e-book até a finalização de uma compra online. Eles são como uma ponte que conecta internautas ao seu objetivo. Mas quando um erro ocorre e o sistema não ajuda, essa “ponte” pode se transformar em uma barreira de acessibilidade.

Agora, imagine a frustração de tentar acessar seu cadastro em uma conta ou finalizar uma transação e não entender onde ou por que algo deu errado. O resultado? Tempo perdido, ansiedade crescente e, muitas vezes, a desistência de continuar o processo.

É exatamente para evitar essas situações que existe o critério de sucesso 3.3.1 do WCAG (Web Content Accessibility Guidelines e Diretrizes de Acessibilidade para Conteúdo Web, em português). Ele garante que, ao preencher um formulário, a pessoa receba orientações claras sobre qualquer erro, incluindo onde ele aconteceu e como corrigi-lo.

Vamos explorar neste texto como aplicar esse critério de forma prática, tornando seu site mais inclusivo e oferecendo uma experiência mais positiva para quem nele navega. Este é mais um trecho da nossa série “WCAG simplificado”, que trata sobre acessibilidade em sites, tendo como base as recomendações internacionais do WCAG.

Quem se beneficia com o critério 3.3.1 do WCAG?

O foco em identificar e corrigir erros em formulários beneficia todas as pessoas no universo digital, mas é especialmente importante para:

Pessoas com deficiências visuais: mensagens de erro que combinam texto, cores e ícones garantem que a informação seja compreensível para quem depende de leitores de tela ou tem dificuldade em distinguir cores.
Pessoas com deficiências motoras: quando o sistema informa claramente onde ocorreu o erro, reduz a necessidade de navegação desnecessária ou repetitiva, tornando o processo mais eficiente.
Pessoas com deficiências cognitivas: este critério é um grande aliado, pois:
- Oferece clareza e orientação: mensagens objetivas ajudam a evitar confusão ou frustração.
- Reduz a carga cognitiva: facilita a compreensão do problema e da solução.
- Fornece feedback imediato: permite correções em tempo real, minimizando erros repetidos.
- Combina texto e design: atende a diferentes formas de processamento da informação, beneficiando quem tem dificuldades de leitura ou interpretação.

O que diz o critério 3.3.1 do WCAG?

Este critério está diretamente relacionado à assistência na entrada de dados em formulários. Sempre que a pessoa inserir uma informação incorreta ou incompleta, o sistema deve:

Identificar o erro: informar claramente qual foi o problema.
Indicar onde o erro ocorreu: destacar o campo específico ou a área da interação que precisa de correção.
Explicar como corrigir o erro: fornecer instruções claras para ajudar a pessoa a corrigir o problema.

Embora o foco principal seja a interação com formulários, essas boas práticas também podem ser aplicadas em outros contextos de entrada de dados, como campos de busca, cadastros de login e senha ou qualquer situação em que internautas tenham que inserir informações críticas.

Dicas práticas para facilitar o atendimento ao critério 3.3.1 do WCAG

Forneça exemplos de entrada correta
Antes mesmo que o erro aconteça, adicione dicas preventivas, como um exemplo de como preencher o campo corretamente. Por exemplo, se o campo pede uma data, mostre como ela deve preenchê-lo: “Formato: DD/MM/AAAA”.
Descreva a entrada correta no próprio campo
Use textos explicativos ou exemplos nos campos. Por exemplo: “Digite seu CPF sem pontos ou traços”.
Informe a natureza do erro e como corrigi-lo
Explique o que houve e como resolver assim que identificar o erro. Algo como: “O número do cartão está incompleto. Por favor, insira 16 dígitos”.
Posicione a mensagem de erro próximo ao campo
Ninguém gosta de rolar a página em busca do problema. Mensagens como “Preenchimento obrigatório” devem aparecer imediatamente abaixo ou ao lado do campo em questão.
Identifique claramente os campos obrigatórios
Antes de começar, deixe claro quais informações são indispensáveis. Use um asterisco (*) e inclua uma legenda como “ Campos obrigatórios”.
Ofereça feedback em tempo real
Mostre alertas assim que a pessoa preencher um campo incorretamente. Isso economiza tempo e reduz a frustração.

O papel do contraste visual e das cores

Ao destacar campos com erro, o contraste visual é essencial para garantir que todas as pessoas possam perceber facilmente onde o problema ocorreu. Isso é especialmente importante para quem tem determinados tipos de deficiência visual ou daltonismo, que podem ter dificuldades em distinguir certos tipos de cores. Por isso, é fundamental não depender apenas de cores para indicar erros.

Além disso, é recomendável usar elementos visuais como ícones acompanhados de texto explicativo, para garantir que a mensagem seja compreensível por todo mundo, independentemente de sua capacidade de perceber cores. Por exemplo, em vez de apenas usar um círculo vermelho, combine o ícone com uma legenda como “Erro: Campo vazio” ao lado do campo em questão.

Lembre-se de que a combinação de texto e elementos visuais ajuda a criar uma experiência mais inclusiva e evita que pessoas com deficiências sejam deixadas sem a devida orientação para corrigir o erro. O contraste não se refere apenas à cor em si, mas também à combinação de cores que torna o texto e os elementos visuais legíveis para qualquer pessoa que navegar em seu site.

Acesse a versão 2.2 do WCAG para aprender mais detalhes sobre o critério 3.3.1 mencionado neste texto. O conteúdo indicado nos links está em inglês, mas é possível traduzi-lo automaticamente pelo navegador Chrome ou Edge.