Rótulo de campo
O que a norma pede
Todo campo de formulário tem um rótulo que o identifica, ou um propósito visualmente óbvio acompanhado de nome acessível.
Formas de atender
Basta uma delas. A primeira é a preferida; as demais são alternativas para exceções.
- Uma forma de atender: todo campo tem um rótulo que o identifica.
- Outra forma: o propósito do campo é visualmente evidente (como a busca com lupa e botão) e ele tem nome acessível.
- 3.3.2 (A)
- 4.1.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:
Desenhe um rótulo visível e permanente para cada campo, acima ou ao lado dele, e rotule também os grupos de opções. O placeholder serve para exemplo, nunca como único rótulo, porque some quando a pessoa começa a digitar.
Formulário de contato
Campos de nome, e-mail e mensagem.
Errado: Só placeholder
No protótipo
Campos com “Nome”, “E-mail” dentro, em cinza claro.
Ao digitar, a pessoa esquece qual campo é qual.
Certo: Rótulo visível
No protótipo
Rótulo “Nome completo” acima do campo; exemplo no placeholder.
O rótulo fica sempre à vista.
Ligue cada campo ao seu rótulo com label e for apontando para o id. Em campos sem rótulo visível, como a busca, use aria-label; em grupos de opções, use fieldset e legend.
Campo de e-mail
Implementação do rótulo.
Errado: Só placeholder
<input type="email" placeholder="E-mail">Sem rótulo associado.
Certo: Rótulo associado
<label for="email">E-mail</label> <input id="email" type="email" placeholder="nome@exemplo.com">O leitor anuncia “E-mail, campo de edição”.
Inclua nos critérios de aceite que todo campo tenha rótulo e garanta que o componente de campo o exija. Campo sem rótulo é intransponível para quem usa leitor de tela e causa desistência em todos.
Formulário minimalista
Um redesenho propõe campos sem rótulo para “limpar” a tela.
Errado: Aprovado pela estética
Decisão
Rótulos removidos; só placeholders.
Mais erros de preenchimento e desistências.
Certo: Rótulos mantidos
Decisão
Visual limpo com rótulos visíveis e bem espaçados.
Estética sem perder clareza.
Navegue pelos campos com Tab e ouça, com o leitor de tela, o nome de cada um; ele precisa dizer o que preencher. Comece a digitar e confira se o rótulo continua visível.
Formulário de contato
Teste com leitor de tela.
Errado: Campos sem nome
“Campo de edição”
“Campo de edição”
Não se sabe o que preencher.
Certo: Campos nomeados
“Nome completo, campo de edição”
“E-mail, campo de edição”
Cada campo é claro.
Escreva rótulos curtos e específicos, com as palavras que a pessoa conhece, como “CPF” ou “Data de nascimento”. Evite siglas internas e use o placeholder só para exemplos de formato.
Rótulo do campo de documento
Campo para o número do documento de identidade.
Errado: Rótulo interno
Rótulo
“Nº DOC ID”
Sigla que a pessoa não conhece.
Certo: Rótulo claro
Rótulo
“Número do RG ou da Carteira de Identidade”
A pessoa sabe o que digitar.