Placeholder não é uma etiqueta
Entenda por que dicas que desaparecem falham com usuários reais.
Placeholder não é uma etiqueta é uma aula grátis de Web Accessibility Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Web Accessibility Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Web Accessibility Academy inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
The Tempting Shortcut
It is tempting to drop hint text in a field and skip the label. But a placeholder is a hint, not a name. ⚠️
It Disappears
The moment someone starts typing, the placeholder vanishes. Now there is nothing left to say what the field was for.
<input type="text" placeholder="Full name">Memory Burden
Users with memory or attention challenges have to remember the hint after it is gone. A persistent label removes that load.
Low Contrast by Default
Placeholder text is usually light gray, which often fails contrast rules. Low-vision users may not read it at all.
Looks Filled In
Gray hint text can read as an already-filled value. People skip the field, then a required error surprises them.
Inconsistent for Screen Readers
Screen reader support for placeholder as a name is patchy and varies by browser. You cannot rely on it being announced.
Use Both, Not Either
Placeholders are fine as extra hints, like a format example. Pair them with a real label, never use them alone.
<label for="phone">Phone</label>
<input id="phone" placeholder="555-0100">Format Examples Shine Here
A placeholder is great for a format example like a date pattern. The label still carries the field's actual name.
Floating Labels
Floating labels slide up when you type, keeping the name visible. They are a real label, just animated, so they pass.
Test by Filling It
Quick check: type into the field. If you can no longer tell what it wants, the placeholder was doing a label's job.
WCAG Backs This Up
WCAG's Labels or Instructions criterion expects a clear, persistent name. Placeholder-only fields routinely fail audits.
Quick Check
Why is a placeholder a poor replacement for a label?
Recap
A placeholder is a fading hint, not a name. Keep a real label and use placeholders only for extra format help. 💡
Perguntas Frequentes
A aula “Placeholder não é uma etiqueta” é grátis?
Sim — o texto completo de “Placeholder não é uma etiqueta” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Web Accessibility Academy, atualize para CoddyKit PRO. O curso de Web Accessibility Academy inclui 4 aulas no total.
O que vou aprender em “Placeholder não é uma etiqueta”?
Entenda por que dicas que desaparecem falham com usuários reais. Você pratica Web Accessibility Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Web Accessibility Academy?
Nenhuma experiência prévia é necessária. Web Accessibility Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Placeholder não é uma etiqueta”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Web Accessibility Academy?
Sim. Cada aula de Web Accessibility Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Toda entrada precisa de um label real
- Placeholder não é uma etiqueta
- Agrupando campos com fieldset e legend
- Texto de ajuda e campos obrigatórios anunciados