Toda entrada precisa de um label real
Associe etiquetas e campos para que toques e leituras funcionem.
Toda entrada precisa de um label real é uma aula grátis de Web Accessibility Academy no CoddyKit. Esta é a aula 1 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.
Why Labels Matter
A form field with no name is a mystery box. A real label tells every user, sighted or not, exactly what to type. 🏷️
The label Element
The label element is HTML's built-in way to name a field. The browser, screen readers, and tap targets all understand it for free.
Connect With for and id
The cleanest link is for on the label matching the input's id. Now they are officially paired.
<label for="email">Email</label>
<input id="email" type="email">IDs Must Be Unique
The id you point to has to be unique on the page. Two inputs sharing one id quietly breaks the pairing.
Wrapping Also Works
You can also wrap the input inside the label. No id needed, since nesting makes the connection clear.
<label>Email
<input type="email">
</label>Bigger Click Target
A connected label gives users a larger click area. Tapping the text focuses or checks the field, which helps shaky hands and small screens.
Screen Readers Read It
When focus lands on a paired input, a screen reader speaks the label first. Without it, users hear only the field type.
title Is Not Enough
A title attribute may show on hover, but it is unreliable on touch and keyboard. It is no substitute for a real label.
Checkboxes Need Labels Too
Checkboxes and radios feel obvious visually, but a label is what makes them tappable and announced. Never leave them bare.
<input id="terms" type="checkbox">
<label for="terms">I agree</label>Visible Beats Hidden
Keep labels visible when you can. Sighted users with cognitive load benefit just as much as screen reader users do.
When You Must Hide It
If a search box has no room for text, hide the label with a visually-hidden class, never display none, so it still reaches assistive tech.
Quick Check
How does a label know which input it names?
Recap
Every input needs a real label, linked by for and id or by wrapping. That one habit makes forms tappable, readable, and clear. ✅
Perguntas Frequentes
A aula “Toda entrada precisa de um label real” é grátis?
Sim — o texto completo de “Toda entrada precisa de um label real” é 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 “Toda entrada precisa de um label real”?
Associe etiquetas e campos para que toques e leituras funcionem. 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 1 de 4.
Quanto tempo leva a aula “Toda entrada precisa de um label real”?
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