0Pricing
Web Accessibility Academy · Aula

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

  1. Toda entrada precisa de um label real
  2. Placeholder não é uma etiqueta
  3. Agrupando campos com fieldset e legend
  4. Texto de ajuda e campos obrigatórios anunciados
← Voltar para Web Accessibility Academy