Contexto
A pessoa precisa saber quais campos são necessários antes de enviar o formulário. Um campo marcado apenas em vermelho, com um símbolo sem legenda ou sem indicação para tecnologias assistivas pode parecer opcional.
Escolha uma convenção consistente para todo o formulário. Use “(obrigatório)” no rótulo ou marque os campos opcionais com “(opcional)”, conforme a proporção e o contexto da tarefa. Um asterisco pode reforçar a indicação, desde que sua legenda esteja explicada e o estado obrigatório também esteja disponível programaticamente.
Associe o rótulo ao campo, use o atributo required quando aplicável e agrupe campos relacionados com fieldset e legend.
Porque isso importa?
A identificação antecipada evita envios incompletos e reduz a necessidade de voltar ao formulário para corrigir erros. A WCAG 2.2 exige rótulos ou instruções para entradas de dados e inclui a identificação de campos obrigatórios como técnica de apoio.
Uma convenção clara também ajuda pessoas que usam zoom, leitor de tela ou navegação por voz a entenderem a tarefa antes de interagir com cada campo.
Quando usar?
- Formulários com campos obrigatórios e opcionais.
- Rótulos de campos que exigem preenchimento.
- Grupos de opções obrigatórias.
- Formulários longos ou críticos.
- Campos com regras específicas de preenchimento.
- Interfaces usadas com teclado ou leitor de tela.
Quando evitar?
- Indicar obrigatoriedade apenas pela cor.
- Usar asterisco sem explicar seu significado.
- Marcar campos de forma inconsistente.
- Esconder a informação apenas no placeholder.
- Usar “obrigatório” sem validação correspondente.
- Exigir dados que não são necessários para a tarefa.
Recomendações
Faça
- Escreva “(obrigatório)”.
- Explique a convenção.
- Use
required. - Associe o rótulo.
- Agrupe campos relacionados.
- Mantenha consistência.
Evite
- Não dependa só de cor.
- Não use asterisco sem legenda.
- Não misture convenções.
- Não esconda a regra no placeholder.
- Não marque campos desnecessários.
- Não exija o que não é usado.
