Contexto
Ao começar a preencher um formulário, o placeholder desaparece. Se ele for o único texto que identifica o campo, a pessoa pode esquecer o que deveria informar ou ter dificuldade para revisar os dados antes do envio.
Use um label visível, curto e específico para identificar cada campo. Utilize o placeholder apenas como complemento, por exemplo para mostrar um formato ou exemplo breve.
Coloque instruções mais longas em um texto auxiliar próximo ao campo e associe-o com aria-describedby. Relacione sempre o label ao campo usando for e id.
Porque isso importa?
O label permanece visível depois que a pessoa começa a digitar, facilita a revisão dos dados e ajuda tecnologias assistivas a identificar o propósito do campo.
Placeholders desaparecem, costumam ter contraste reduzido e não substituem labels para leitores de tela.
Quando usar?
- Um label visível em cada campo.
- Placeholder para exemplo curto.
- Placeholder para formato esperado.
- Texto auxiliar para instruções.
aria-describedbypara ajuda associada.- Labels claros em campos de busca.
Quando evitar?
- Usar placeholder como único label.
- Escrever instruções longas no placeholder.
- Indicar obrigatoriedade apenas no placeholder.
- Usar exemplos como se fossem labels.
- Fazer o label desaparecer sem alternativa.
- Depender do contraste padrão do placeholder.
Recomendações
Faça
- Mantenha o label visível.
- Escreva labels específicos.
- Use placeholder só como apoio.
- Associe label e campo.
- Use texto auxiliar para regras.
- Teste o campo preenchido.
Evite
- Não substitua o label.
- Não esconda instruções no placeholder.
- Não use exemplos como identificação.
- Não dependa de contraste fraco.
- Não remova o contexto no foco.
- Não repita regras desnecessárias.
