5.1.1.14 - Requisitos para instruções de preenchimento de entrada de dados
Descrição
Deve haver instruções de preenchimento de entrada de dados. Campos de entrada de dados devem ter, além do seu rótulo, instruções de preenchimento relacionadas com o tipo de dados exigidos para entrada, de forma que o usuário possa perceber. Essa técnica é importante para evitar que o usuário cometa erros durante o preenchimento do formulário. Isto pode tomar forma como (mas não se limitando a) de “marcadores de posição” (placeholder), etiqueta, parágrafos ou instruções prévias. Na dúvida, deve-se ser redundante.
Exemplo
Um campo de data exibe o formato exigido de entrada dia/mês/ano.
Desempenho funcional
Componentes aplicáveis
Cenários para desenvolvimento de interfaces
Escolha um perfil para ver as orientações específicas:
Inclua instruções visíveis e claras nos campos de entrada, como placeholders ou textos próximos aos campos, garantindo que os usuários saibam exatamente o que devem inserir. Priorize a clareza para evitar confusão ou erros.
Coloque instruções visíveis perto do campo
Mostre o formato esperado antes de a pessoa digitar, sem depender só do placeholder.
Certo: Instrução permanente
anotação de especificação
Abaixo do campo "Data": texto "Use dia/mês/ano, ex.: 31/12/1990".
Errado: Instrução só no placeholder
anotação de especificação
Placeholder "dd/mm/aaaa", que some ao começar a digitar.
Adicione instruções de preenchimento no código, utilizando atributos como placeholder, textos auxiliares em <small> ou <p>, garantindo que as orientações sejam acessíveis e visíveis tanto visualmente quanto por leitores de tela.
Ligue a instrução ao campo
Com aria-describedby, o leitor de tela lê a instrução junto com o rótulo.
Certo: Instrução associada
<label for="nasc">Data de nascimento</label> <input id="nasc" aria-describedby="nasc-ajuda"> <small id="nasc-ajuda">Use dia/mês/ano</small>Leitor de tela anuncia: "Data de nascimento, campo de edição, Use dia/mês/ano"
Errado: Instrução solta
<label for="nasc">Data de nascimento</label> <input id="nasc"> <small>Use dia/mês/ano</small>Leitor de tela anuncia: "Data de nascimento, campo de edição": sem o formato
Aprenda a fazer com conteúdos selecionados para você
Garanta que as equipes existam instruções que ajudem o preenchimento dos campos de entrada e estejam bem visíveis em todo formulário, reduzindo o risco de erros de preenchimento e melhorando a experiência geral do usuário no sistema.
Mapeie campos que precisam de instrução
Campos com formato específico (data, CPF, senha) precisam de instrução visível.
Checklist do requisito 5.1.1.14: formulário "Cadastro"
- instrução visível
Data de nascimento
formato dia/mês/ano
- instrução visível
Senha
regras de senha
- pendente
CPF
somente números
2 de 3 campos em conformidade, 1 pendente de revisão.
Verificar a presença de instruções visíveis
Assegurar que os campos de entrada possuam instruções visíveis que detalham o tipo de dado esperado. Isso pode ser feito por meio de rótulos detalhados, textos explicativos próximos ao campo ou seções de ajuda.
Confirmar o uso de placeholders apropriados
Garantir que, caso sejam utilizados placeholders, eles sejam informativos e expliquem claramente o tipo de dado a ser inserido, mas sem substituir um rótulo permanente.
Testar a leitura por tecnologia assistiva
Utilizar leitores de tela para verificar se as instruções de preenchimento são corretamente lidas e compreendidas, garantindo que os usuários com deficiência visual tenham acesso às informações necessárias.
Validar a redundância das instruções
Conferir se as instruções estão presentes em mais de uma forma (por exemplo, texto adicional e placeholder) para aumentar a acessibilidade e evitar ambiguidades no preenchimento.
Checar a clareza e a precisão das orientações
Revisar se as instruções são claras, diretas e relacionadas especificamente ao campo, evitando mensagens genéricas que possam confundir o usuário.
Testar a localização e proximidade das instruções
Verificar se as instruções estão posicionadas próximas aos campos a que se referem, de modo a facilitar a associação visual e auditiva.
Simular diferentes tipos de preenchimento
Inserir dados variados para certificar-se de que as instruções ajudam efetivamente o usuário a preencher o campo corretamente e a evitar erros comuns.
Preencha ouvindo o leitor de tela
Foque cada campo e confira se a instrução é anunciada antes de digitar.
Certo: Instrução anunciada
"Senha, campo seguro"
"Mínimo de 8 caracteres, com um número"
A pessoa sabe a regra antes de digitar.
Errado: Instrução ausente
"Senha, campo seguro"
instrução visual não anunciada
A regra só aparece depois do erro.
Escreva instruções de preenchimento detalhadas e precisas para cada campo, explicando claramente o tipo de dado necessário. Seja redundante quando necessário, para que todos os usuários entendam o que é esperado.
Escreva instruções específicas
Diga o formato, dê um exemplo e, na dúvida, seja redundante.
Certo: Instrução com exemplo
texto de ajuda
"Mínimo de 8 caracteres, com pelo menos um número. Ex.: casa2024"
Regra clara e exemplo.
Errado: Instrução vaga
texto de ajuda
"Crie uma senha forte"
O que é "forte"?
Requisitos relacionados
Outros requisitos que se aplicam aos mesmos componentes.