Campos obrigatórios
O que a norma pede
Campos obrigatórios são identificados de um jeito que todas as pessoas percebem, e não só por cor ou só por um símbolo sem explicação.
- 3.3.2 (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:
Indique os campos obrigatórios com texto, como “(obrigatório)”, ou com um símbolo explicado no início do formulário. Cor sozinha não basta.
Formulário de cadastro
Alguns campos são obrigatórios.
Errado: Só cor
No protótipo
Rótulos obrigatórios em vermelho.
Quem não distingue cores não percebe.
Certo: Texto e legenda
No protótipo
“Campos com * são obrigatórios.” no topo; “Nome completo *”.
Todos percebem o que é obrigatório.
Marque os campos obrigatórios com o atributo required, para que o leitor de tela anuncie “obrigatório”, e mantenha a indicação visual. Se o required já anuncia, esconda o asterisco do leitor.
Campo de nome
Indicação de obrigatório.
Errado: Só visual
<label for="nome" class="vermelho">Nome</label> <input id="nome">Nem o leitor nem quem não vê cores sabem.
Certo: Visual e programático
<label for="nome">Nome <span aria-hidden="true">*</span></label> <input id="nome" required>O leitor anuncia “obrigatório”.
Defina no sistema de design o padrão de indicação de obrigatórios e reduza os campos obrigatórios ao essencial. Descobrir a obrigatoriedade só depois de enviar gera frustração e retrabalho.
Formulário longo
30 campos, 20 obrigatórios.
Errado: Descobre ao enviar
Situação
Obrigatórios sem indicação; erros aparecem só ao enviar.
Várias tentativas até conseguir.
Certo: Claro desde o início
Situação
Obrigatórios indicados e revistos; 12 campos ficaram opcionais.
Envio de primeira.
Veja o formulário em tons de cinza e confira se os campos obrigatórios continuam identificáveis. Com o leitor de tela, cada um deve ser anunciado como obrigatório.
Campo de nome
Teste com leitor de tela.
Errado: Sem anúncio
Leitor de tela anuncia: “Nome, campo de edição”
Não se sabe que é obrigatório.
Certo: Com anúncio
Leitor de tela anuncia: “Nome, campo de edição, obrigatório”
A obrigatoriedade é percebida.
Explique uma vez, no início do formulário, o que o asterisco significa e use sempre a mesma convenção. Se quase todos os campos forem obrigatórios, marque os opcionais.
Legenda do formulário
Início do formulário de inscrição.
Errado: Sem legenda
No topo
(nenhuma explicação)
O asterisco não é entendido por todos.
Certo: Com legenda
No topo
“Todos os campos são obrigatórios, exceto os marcados como opcionais.”
A regra é clara.